How to use vue.js to make asynchronous requests-Vue.js-php.cn

How to use vue.js to make asynchronous requests

藏色散人

Release： 2023-01-13 00:44:56

Original

5231 people have browsed it

How to use vue.js to make asynchronous requests: first install axiox in the project; then introduce axiox in main.js for global use; then make an axios get request; and finally implement axios post request. .

How to use vue.js to make asynchronous requests

The operating environment of this tutorial: windows7 system, vue2.0 version, thinkpad t480 computer.

Recommended: "vue tutorial"

Use vue.js to make asynchronous requests

1. Axios implements asynchronous requests

1. Install axiox in the project

npm install --save axios

Copy after login

2.Introduce it in main.js for global use

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

Copy after login

3.axios get request

vue Front-end:

<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;
  })
})

Copy after login

Request result:

How to use vue.js to make asynchronous requests

4.axios post request

Vue front-end:

Submit parameters Two forms:

// 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>

Copy after login

node 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;
  })
})

Copy after login

2. vue-resource implements asynchronous requests (basically the same steps as axios)

1. Install vue in the project -resource

npm install --save vue-resource

Copy after login

2.Introduced in main.js for global use

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

Copy after login

3.vue-resource get request

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

Copy after login

4.vue-resource post Request

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

Copy after login

The above is the detailed content of How to use vue.js to make asynchronous requests. For more information, please follow other related articles on the PHP Chinese website!