溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
使用axios可以統一做請求響應攔截，例如請求響應時我們攔截響應信息，判斷狀態碼，從而彈出報錯信息。請求超時的時候斷開請求，還可以很方便地使用then或者catch來處理請求。
下載源碼
安裝
npm install axios --save
建立http.js文件
在/src/utils/目錄下建立一個htttp.js
1.首先導入axios和router。
import axios from 'axios'; import router from '../router';
2.接著設置axios請求參數。
axios.defaults.timeout = 5000; //請求超時5秒 axios.defaults.baseURL =''; //請求base url axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //設置post請求是的header信息
如果你要用到session驗證碼功能，讓請求攜帶cookie，可以加上以下一行：
axios.defaults.withCredentials = true
3.然后，我們要給請求加個攔截器，就是在請求即將發送之前，我們需要給請求添加信息，比如下面的代碼中，我們給請求添加header信息，header中添加token，這樣每次請求都會在header中攜帶token信息。這在我們的接口開發中經常用到。
//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.接下來，我們看下請求返回時的攔截器。
比如我們發送請求時，如果后端返回錯誤代碼，則前端應該提示信息。比如后臺返回沒有權限，不允許訪問，跳轉到登錄頁，這些都可在攔截器上完成。
axios.interceptors.response.use(
response => {
if (response.data.code === 4003) {
Toast({
mes: '您沒有權限操作！',
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}//從哪個頁面跳轉
})
}
return response
},
err => {
if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
Toast({
mes: '網絡異常，連接超時...',
timeout: 1500
});
}
return Promise.reject(err)
}
)
5.現在我們來封裝一個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();
}
});
這段代碼是用戶登錄發送post請求的代碼示例，其他get請求也是一樣的處理方式。接下來我們會有文章具體講解如何使用封裝好的axios實現登錄的例子，敬請關注。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
