Home  >  Article  >  Web Front-end  >  How to use vue.js to make asynchronous requests

How to use vue.js to make asynchronous requests

藏色散人
藏色散人Original
2020-12-14 11:03:315193browse

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

2.Introduce it in main.js for global use

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

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

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>

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

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

1. Install vue in the project -resource

npm install --save vue-resource

2.Introduced in main.js for global use

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

3.vue-resource get request

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

4.vue-resource post Request

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn