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'
                },
                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異步請求所以我們只能在剛調用方法得當時候定義一個在新頁面打開的鏈接