vue 的 axios 安裝

安裝

安裝或者引入CDN文件

npm install axios

<script src="https://unpkg.com/axios/dist/axios.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

GET

在Vue原型鏈上綁定，就可以全局使用$http方法

import axios from 'axios';
Vue.prototype.$http = axios;

然后我們就可以，其他地方使用的話，如同使用vue-resource一樣，我們還可以在get或者post請求后面增加請求頭header

this.$http.get("http://www.tuling123.com/openapi/api", {
    params: {
        key: "c75ba576f50ddaa5fd2a87615d144ecf",
        info: "先有雞還是先有蛋"
    },
    header:{}
}).then((data) => {
    console.log(data);
    //success callback
}, (err) => {
    //error callback
})

POST

post請求比get請求復雜一點，首先降Content-Type格式為application/x-www-form-urlencoded，因為axios的post方法默認使用application/json格式編碼數據，那么解決方案就有兩種，一是后台改變接收參數的方法，另一種則是將axios的post方法的編碼格式修改為application/x-www-form-urlencoded，這樣就不需要后台做什么修改了

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//全局更改
import qs from "qs";//配合qs模塊轉化post請求的參數，記得先npm install qs
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

然后在組件中這樣使用

export default {
    this.$axios({
      method: "post",
      //headers: { "content-type": "application/x-www-form-urlencoded" },//局部更改
      url: "http://localhost:3000/users/test",
      data: this.$qs.stringify({
        name: ""
      })
    }).then(res => {
      console.log(res);
    });
  }
};

具體或者其他方法可以參考官方文檔的這篇解決方案using-applicationx-www-form-urlencoded-format

代理

比如在vue-cli3中我們可以這樣配置代理來解決跨域問題，在package.json和babel.config.js同級目錄下新建vue.config.js文件寫入以下代碼

module.exports = {
    baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'https://m.nubia.com',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

正常情況請求https://m.nubia.com/show/page/phoneType是會跨域的，經過上面配置，就可以用/api/show/page/phoneType代替來訪問

this.$axios({
    method: "get",
    url: "/api/show/page/phoneType",
    //    /api/show/page/phoneType代替https://m.nubia.com/show/page/phoneType
}).then(res => {
    console.log(res);
});

原文：https://github.com/Wscats/vue-tutorial/issues/16

參考文檔

• Axios Github文檔