前言
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)海淀,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
使用axios可以統(tǒng)一做請求響應(yīng)攔截，例如請求響應(yīng)時我們攔截響應(yīng)信息，判斷狀態(tài)碼，從而彈出報(bào)錯信息。請求超時的時候斷開請求，還可以很方便地使用then或者catch來處理請求。
下載源碼
安裝
npm install axios --save
建立http.js文件
在/src/utils/目錄下建立一個htttp.js
1.首先導(dǎo)入axios和router。
import axios from 'axios'; import router from '../router';
2.接著設(shè)置axios請求參數(shù)。
axios.defaults.timeout = 5000; //請求超時5秒 axios.defaults.baseURL =''; //請求base url axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //設(shè)置post請求是的header信息
如果你要用到session驗(yàn)證碼功能，讓請求攜帶cookie，可以加上以下一行：
axios.defaults.withCredentials = true
3.然后，我們要給請求加個攔截器，就是在請求即將發(fā)送之前，我們需要給請求添加信息，比如下面的代碼中，我們給請求添加header信息，header中添加token，這樣每次請求都會在header中攜帶token信息。這在我們的接口開發(fā)中經(jīng)常用到。
重慶分公司
重慶分公司
//http request 攔截器
axios.interceptors.request.use(
config => {
let token = sessionStorage.getItem('token')
if (token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers = {
'X-token': token
}
}
return config
},
err => {
return Promise.reject(err)
}
)4.接下來，我們看下請求返回時的攔截器。
比如我們發(fā)送請求時，如果后端返回錯誤代碼，則前端應(yīng)該提示信息。比如后臺返回沒有權(quán)限，不允許訪問，跳轉(zhuǎn)到登錄頁，這些都可在攔截器上完成。
axios.interceptors.response.use(
response => {
if (response.data.code === 4003) {
Toast({
mes: '您沒有權(quán)限操作！',
timeout: 1500,
callback: () => {
router.go(-1);
}
});
return false;
}
if (response.data.code === -1) {
localStorage.removeItem('token')
router.push({
path:"/login",
querry:{redirect: router.currentRoute.fullPath}//從哪個頁面跳轉(zhuǎn)
})
}
return response
},
err => {
if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
Toast({
mes: '網(wǎng)絡(luò)異常，連接超時...',
timeout: 1500
});
}
return Promise.reject(err)
}
)5.現(xiàn)在我們來封裝一個get方法：
/**
* 封裝get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params={}, headers={}){
return new Promise((resolve, reject) => {
axios.get(url,{
params: params,
headers: headers
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}6.再封裝一個post方法：
/**
* 封裝post請求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}){
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}使用
在main.js中引入：
import {post,get} from './utils/http'
//定義全局變量
Vue.prototype.$post = post;
Vue.prototype.$get = get;在組件中使用：
this.$post(url, params)
.then((res) => {
if (res.result === 'success') {
this.$message({
message: '登錄成功！',
type: 'success'
})
this.$router.push('/main')
} else {
this.$message.error(res.msg)
this.refreshCode();
}
});這段代碼是用戶登錄發(fā)送post請求的代碼示例，其他get請求也是一樣的處理方式。接下來我們會有文章具體講解如何使用封裝好的axios實(shí)現(xiàn)登錄的例子，敬請關(guān)注。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。
