Vue.js+axios-npm 获取服务

首先看下官网上说的

执行GET请求

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

axios API

可以通过传递相关配置来进行请求axios。

// 发送POST请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

关于axios我觉官网写的很好，就简单的总结一下，我自己的理解，

首先我们将项目引入到vue项目中，

npm install axios

引入后我们到项目的package.json文件中看一下是否有

 文件中有了这个后我们到main.js中引入我们的axios，之后我们在调用的时候就可this.$axios

之后就可以在vue中引用，首先个人喜欢用data传递参数，

       getxqlist(id){
           let newLink = window.open();
             this.$axios({
                method:"post",
                url:"http://service.tianditu.gov.cn/queryServlet?mn=QueryService&id=1339&timeStamp=1536642705793&_=1536642705732",
                headers:{
                    'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                data:{
                    mn: 'updateVisits',
                    id: id,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then((res)=>{
                this.form=res.data
                newLink.location.href=this.form.serviceview
                console.log(res.data,78666666);
            })
            console.log('优先走这里')
       },

具体可以看这个博客，我觉得写的非常好的地址：https://blog.csdn.net/wopelo/article/details/78783442

当我按照官网的写法给post请求服务的时候，发现传进去的值后台接收不了，他很清楚的说出啦为什么和两个解决方案

这里我简单的理解一下，这种写法可以将参数传给后台，因为axios异步请求所以我们只能在刚调用方法得当时候定义一个在新页面打开的链接