使用 cnpm 安裝 axios
cnpm install axios --save-dev
安裝其他插件的時候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每個需要發送請求的組件中即時引入
為了解決這個問題，有兩種開發思路，一是在引入 axios 之后，修改原型鏈，二是結合 Vuex，封裝一個 aciton。這里只說修改原型鏈的方式
改寫原型鏈
首先在 main.js 中引入 axios
import axios from 'axios'
這時候如果在其它的組件中，是無法使用 axios 命令的。所以我們將 axios 改寫為 Vue 的原型屬性
Vue.prototype.$http= axios
在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $http命令
例如
methods: {show() {? ? ? this.$http({? ? ? ? method:'get',? ? ? ? url:'/user',? ? ? ? data: {? ? ? ? ? name:'virus'}? ? })? }
配置 axios
實際上只有 url 是必須的，完整的 api 可以參考https://www.kancloud.cn/yunye/axios/234845
對于get請求
axios.get('/user', {? ? ? ? ? params:{? ? ? ? ? ? ? ? name:"virus"}? ? })
對于post請求
axios.post('/user',{? ? ? name:"virus"})
3、 一次性并發多個請求
functiongetUserAccount(){returnaxios.get('/user/12345');}functiongetUserPermissions(){returnaxios.get('/user/12345/permissions');}axios.all([getUserAccount(),getUserPermissions()])? .then(axios.spread(function(acct,perms){//當這兩個請求都完成的時候會觸發這個函數，兩個參數分別代表返回的結果}))
4.axios可以通過配置（config）來發送請求
//發送一個`POST`請求axios({? ? method:"POST",? ? url:'/user/1111',? ? data:{? ? ? name:"virus"}});
完整的請求還應當包括 .then 和 .catch
.then(function(res){console.log(res)? ? ? ? })? ? .catch(function(err){console.log(err)? ? ? ? })
當請求成功時，會執行 .then，否則執行 .catch
這兩個回調函數都有各自獨立的作用域，如果直接在里面訪問 this，無法訪問到 Vue 實例,這時只要添加一個 .bind(this) 就能解決這個問題
.then(function(res){console.log(this.data)? ? }.bind(this))
請求方式的別名，這里對所有已經支持的請求方式都提供了方便的別名
axios.request(config);axios.get(url[,config]);axios.delete(url[,config]);axios.head(url[,config]);axios.post(url[,data[,config]]);axios.put(url[,data[,config]])axios.patch(url[,data[,config]])
另外，補充
vue cli腳手架前端調后端數據接口時候的本地代理跨域問題，如我在本地localhost訪問接口http://40.00.100.100:3002/是要跨域的，相當于瀏覽器設置了一到門檻，會報錯XMLHTTPRequest can not loadhttp://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 為什么跨域同源非同源自己去查吧，在webpack配置一下proxyTable就OK了，如下 config/index.js
dev: {? ? 加入以下? ? proxyTable: {'/api': {? ? ? ? target:'http://40.00.100.100:3002/',//設置你調用的接口域名和端口號 別忘了加httpchangeOrigin:true,? ? ? ? pathRewrite: {'^/api':'/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調? ? ? ? ? ? ? ? 用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可? ? ? ? }? ? ? }? ? },
鏈接：http://www.lxweimin.com/p/e36956dc78b8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
