快捷導(dǎo)航

封裝一下vue中的axios示例代碼詳解

更新時間：2020年02月16日 10:09:06 作者：表示不會

這篇文章主要介紹了封裝一下vue中的axios，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御cSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。

安裝

npm install axios; // 安裝axios

好了，下面開始今天的正文。

此次封裝用以解決：（對于登錄功能的可以直接使用，其他網(wǎng)絡(luò)請求也可以直接用，如果有潔癖，可以把token有關(guān)的幾行代碼刪掉）

ps:使用時得的引入axios時： import axios from '這個文件的名字及相對路徑'

接受后臺token
post參數(shù)自動轉(zhuǎn)換,省略qs.stringify()
后臺token過期之后自動清除本地數(shù)據(jù)，以便下次再次輸入賬號密碼
更好的錯誤提示信息

/**
 * 封裝網(wǎng)絡(luò)請求
 */
import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'
//token過期之后重新回登錄界面
const toLogin = () =>{
 router.push("/login")
}
// 錯誤信息響應(yīng)方法
const errroHandle = (status,other) => {
 switch(status){
  case 400:
   console.log("服務(wù)器無法理解請求信息");
   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;
 }
}
// 創(chuàng)建axios對象
const instance = axios.create({
 timeout:5000
})
// 掛在全局對象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 攔截器：請求攔截和響應(yīng)攔截 post請求參數(shù)需要轉(zhuǎn)碼
// 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

總結(jié)

以上所述是小編給大家介紹的封裝一下vue中的axios示例代碼詳解，希望對大家有所幫助！

您可能感興趣的文章: