vue axios整合使用全攻略
慣例先安裝axios，不多說(shuō)！
cnpm install axios
1.axios配置
我的目錄結(jié)構(gòu)src/axios/index.js，axios配置都在該文件下
src/axios/index.js 如下：
import axios from 'axios' import qs from 'qs' // axios 配置 axios.defaults.timeout = 5000; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; axios.defaults.baseURL = 'http://localhost:8008';
攔截器，axios.interceptors.request.use發(fā)送請(qǐng)求前處理
axios.interceptors.response.use接受返回后，回調(diào)之前處理處理
//POST傳參序列化
axios.interceptors.request.use((config) => {
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
return Promise.reject(error);
});
//返回狀態(tài)判斷
axios.interceptors.response.use((res) =>{
if(!res.data.success){
return Promise.reject(res);
}
return res;
}, (error) => {
//404等問題可以在這里處理
return Promise.reject(error);
});
公共方法：
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
業(yè)務(wù)方法：
export default {
getAddressJson() {
return fetch('/address/',{addressId:1})
}
}
如果不理解可以將以上代碼依次copy到src/axios/index.js文件，當(dāng)然axios.defaults.baseURL = 'http://localhost:8008'; 需要換成自己的api。
2全局注冊(cè)axios
為了使用axios，在各個(gè)組件中引入就可以使用：
import axios from './axios'
但是使用這種方法我們需要在每一個(gè)組件中去引入，有些麻煩，下面我們介紹一種全局注冊(cè)的方法。
在main.js中：
import axios from './axios' Vue.prototype.$axios = axios
添加這兩行代碼，將 axios 改寫為 Vue 的原型屬性，這樣在各個(gè)組件中都可以使用axios，具體方法如下：
submitForm () {
this.$axios.getAddressJson().then(function (res) {
//成功之后處理邏輯
console.log(res)
},function (res) {
//失敗之后處理邏輯
console.log("error:"+res)
})
}
總結(jié)
以上所述是小編給大家介紹的vue axios整合使用全攻略，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目中常見問題及解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue for循環(huán)出來(lái)的數(shù)據(jù)實(shí)現(xiàn)用逗號(hào)隔開
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言,正確的HTML編碼和結(jié)構(gòu)對(duì)于網(wǎng)頁(yè)的正確顯示至關(guān)重要,當(dāng)HTML代碼正確無(wú)誤時(shí),網(wǎng)頁(yè)的效果圖將與設(shè)計(jì)師的預(yù)期相符,反之則可能出現(xiàn)布局錯(cuò)亂、樣式失效等問題2024-10-10
vue $nextTick實(shí)現(xiàn)原理深入詳解
這篇文章主要介紹了vue $nextTick實(shí)現(xiàn)原理深入詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue element-UI el-select循環(huán)選中的問題
這篇文章主要介紹了Vue element-UI el-select循環(huán)選中的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時(shí),可能會(huì)遇到數(shù)據(jù)聯(lián)動(dòng)的現(xiàn)象,即修改一個(gè)表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會(huì)跟著變化,這種現(xiàn)象通常是因?yàn)樗斜砀竦臄?shù)據(jù)引用了同一個(gè)對(duì)象或數(shù)組導(dǎo)致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象,感興趣的朋友一起看看吧2024-11-11
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了vue百度地圖實(shí)現(xiàn)自定義彈框樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vant實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06