vue-cli 引入axios及跨域使用

使用 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

來源:簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容