Heim > Web-Frontend > View.js > Hauptteil

So verwenden Sie vue.js, um asynchrone Anfragen zu stellen

藏色散人
Freigeben: 2023-01-13 00:44:56
Original
5196 Leute haben es durchsucht

So verwenden Sie vue.js, um asynchrone Anfragen zu stellen: Installieren Sie dann axiox in main.js für die globale Verwendung, und implementieren Sie schließlich axios post request.

So verwenden Sie vue.js, um asynchrone Anfragen zu stellen

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.0-Version, Thinkpad T480-Computer.

Empfohlen: „vue-Tutorial

Verwenden Sie vue.js, um asynchrone Anfragen zu stellen

1. Installieren Sie axiox im Projekt

npm install --save axios
Nach dem Login kopieren

2. Führen Sie es in main ein. js für die globale Verwendung

import axios from 'axios'
//可以给axios的ajax请求设置统一的主机和端口号
axios.defaults.baseURL = "http://157.122.54.189:8080/";
//将axios这个对象添加到Vue的原型对象中,在使用的时候就只需要使用this.对象名就可以了
Vue.prototype.$http = axios
Nach dem Login kopieren

3.axios' Get-Anfrage

Vue-Frontend:

<template>
 <div>
 </div>
</template>
<script>
export default {
  methods:{
   getData(){
   //axios-get请求
   this.$http.get(&#39;/getData1&#39;)
         .then(r => console.log(r))//接口调用成功返回的数据
         .catch(err => console.log(err)),//接口调用失败返回的数据
    }
  }
  mounted(){//模板或el对应的html渲染完成后再调用里面的方法
 this.getData()
  }
}
</script>
<style scoped>
</style>
node后端:
server.get(&#39;/getData1&#39;,function(req,res){
  res.send({
    &#39;msg&#39;:&#39;aaa&#39;
  })
})
Nach dem Login kopieren

Anfrageergebnis:

4.axios' Post-AnfrageSo verwenden Sie vue.js, um asynchrone Anfragen zu stellen

Vue-Frontend:

Zwei Formen der Einreichung Parameter:

// 1.可以直接传入字符串 name=张三&age=19
// 2.可以以对象的形式传入{name:“三”,age:19}
<template>
 <div>
 </div>
</template>
<script>
export default {
  methods:{
   getData(){
   //axios-post请求传值
      this.$http({
          method:"post",
          url:"/getData2",
          headers:{
              &#39;Content-type&#39;: &#39;application/x-www-form-urlencoded&#39;
          },
          data:{
              name:&#39;xxx&#39;
          },
          transformRequest: [function (data) {//更改传值格式
              let ret = &#39;&#39;
              for (let it in data) {
                ret += encodeURIComponent(it) + &#39;=&#39; + 
                encodeURIComponent(data[it]) + &#39;&&#39;
              }
              return ret.slice(0,ret.length-1)
            }],
      })
        .then(r => console.log(r))
        .catch(err => console.log(err))
    }
  }
  mounted(){//模板或el对应的html渲染完成后再调用里面的方法
 this.getData()
  }
}
</script>
<style scoped>
</style>
Nach dem Login kopieren

Knoten-Backend:

server.post(&#39;/getData2&#39;,function(req,res){
  req.on("data",function(data){
      console.log(querystring.parse(decodeURIComponent(data)));
  });
  res.send({
    &#39;msg&#39;:&#39;bbb&#39;
  })
})
Nach dem Login kopieren

2. vue-resource implementiert asynchrone Anforderungen (im Grunde die gleichen Schritte wie axios)

1. Installieren Sie vue-resource im Projekt

npm install --save vue-resource
Nach dem Login kopieren

2 Globale Verwendung

import vueResource from &#39;vue-resource&#39;
Vue.use(vueResource)//这儿有所不同
Nach dem Login kopieren

3.vue-Resource-Get-Anfrage

this.$http.get(&#39;/getData1&#39;)
    .then(r => console.log(r))//接口调用成功返回的数据
    .catch(err => console.log(err)),//接口调用失败返回的数据
Nach dem Login kopieren

4.vue-Resource-Post-Anfrage

this.$http.post(&#39;/getData2&#39;,{name:"bbb"})
    .then(r => console.log(r))//接口调用成功返回的数据
    .catch(err => console.log(err)),//接口调用失败返回的数据
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue.js, um asynchrone Anfragen zu stellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!