溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在vue項目中，和后臺交互獲取數據這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防御cSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。
安裝
npm install axios; // 安裝axios
好了，下面開始今天的正文。
此次封裝用以解決： （對于登錄功能的可以直接使用，其他網絡請求也可以直接用，如果有潔癖，可以把token有關的幾行代碼刪掉）
ps:使用時得的引入axios時： import axios from '這個文件的名字及相對路徑'
/**
* 封裝網絡請求
*/
import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'
//token過期之后重新回登錄界面
const toLogin = () =>{
router.push("/login")
}
// 錯誤信息響應方法
const errroHandle = (status,other) => {
switch(status){
case 400:
console.log("服務器無法理解請求信息");
break;
case 401:
console.log("用戶信息驗證失敗");
localStorage.removeItem("token"); // 可選項
toLogin();
break;
case 403:
console.log("請求被限制");
localStorage.removeItem("token"); // 可選項
toLogin();
break;
case 404:
console.log("客戶端請求信息錯誤");
break;
default:
console.log(other);
break;
}
}
// 創建axios對象
const instance = axios.create({
timeout:5000
})
// 掛在全局對象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 攔截器：請求攔截和響應攔截 post請求參數需要轉碼
// axios的返回值對象要求是一個promise對象
instance.interceptors.request.use(config =>{
if(config.method === "post"){
config.data = qs.stringify(config.data)
}
if(store.state.token){
config.headers.authorization = store.state.token;
}
return config;
},error => Promise.reject(error))
instance.interceptors.response.use(
// 成功
response => response.status === 200 ? Promise.resolve(response) :Promise.reject(response),
// 失敗
error => {
const { response } = error;
if(response){
errroHandle(response.status,response.data)
return Promise.reject(response)
}else{
// 錯誤信息都無法返回
console.log("請求被中斷");
}
}
)
export default instance
總結
以上所述是小編給大家介紹的封裝一下vue中的axios示例代碼詳解，希望對大家有所幫助！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
