快捷導(dǎo)航

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

更新時(shí)間：2020年02月16日 10:09:06 作者：表示不會(huì)

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

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

安裝

npm install axios; // 安裝axios

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

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

ps:使用時(shí)得的引入axios時(shí)： import axios from '這個(gè)文件的名字及相對(duì)路徑'

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

/**
 * 封裝網(wǎng)絡(luò)請(qǐng)求
 */
import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'
//token過期之后重新回登錄界面
const toLogin = () =>{
 router.push("/login")
}
// 錯(cuò)誤信息響應(yīng)方法
const errroHandle = (status,other) => {
 switch(status){
  case 400:
   console.log("服務(wù)器無法理解請(qǐng)求信息");
   break;
  case 401:
   console.log("用戶信息驗(yàn)證失敗");
   localStorage.removeItem("token"); // 可選項(xiàng)
   toLogin();
   break;
  case 403:
   console.log("請(qǐng)求被限制");
   localStorage.removeItem("token"); // 可選項(xiàng)
   toLogin();
   break;
  case 404:
   console.log("客戶端請(qǐng)求信息錯(cuò)誤");
   break;
  default:
   console.log(other);
   break;
 }
}
// 創(chuàng)建axios對(duì)象
const instance = axios.create({
 timeout:5000
})
// 掛在全局對(duì)象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 攔截器：請(qǐng)求攔截和響應(yīng)攔截 post請(qǐng)求參數(shù)需要轉(zhuǎn)碼
// axios的返回值對(duì)象要求是一個(gè)promise對(duì)象
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{
   // 錯(cuò)誤信息都無法返回
   console.log("請(qǐng)求被中斷");
  }
 }
)
export default instance

總結(jié)

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

您可能感興趣的文章: