在vue專案中，和後臺互動獲取資料這塊，我們通常使用的是axios庫，它是基於promise的http庫，可執行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦cSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不瞭解的，可以移步axios文件。

安裝

npm install axios; // 安裝axios

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

此次封裝用以解決： （對於登入功能的可以直接使用，其他網路請求也可以直接用，如果有潔癖，可以把token有關的幾行程式碼刪掉）

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

• 接受後臺token
• post引數自動轉換,省略qs.stringify()
• 後臺token過期之後自動清除本地資料，以便下次再次輸入賬號密碼
• 更好的錯誤提示資訊

/**
 * 封裝網路請求
 */
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示例程式碼詳解，希望對大家有所幫助！