vue axios封裝

前言：

對第三方庫進行二次封裝和抽離到統一模塊，項目面對自己的模塊進行開發。如果有一天更換庫，只需要修改自己模塊中的代碼，無需對整個項目進行重構。

將axios網絡請求庫封裝到network文件下的request.js中，項目中所有網絡請求相關，全部面對request.js開發。

---

 

一、vue目錄結構

 

二、封裝

import axios from "axios"

// 如果換axios框架，只需本頁去掉axios相關，導入最新框架，return new Promise（）就可以，項目中其他文件依舊正常使用
export function request(config) {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    });

  // 2. 攔截器(攔截之后進行對應操作，完成操作后需要返回回去)
  // 2.1請求攔截
    instance.interceptors.request.use(success =>{
      // 一般做1. 每次網絡請求的時候都希望在界面中顯示一個請求圖標
                  //  2. 某些網絡請求（比如登錄（token）），必須攜帶一些特殊的信息 
      console.log(success);
      return success   // 操作完成后返回回去，不然main里面拿不到
    },err =>{
      // 發不出去請求的時候到這里，一般不會出現
      console.log(err)
    })
    
    //  2.2  響應攔截
    instance.interceptors.response.use(res =>{
      console.log('響應攔截');
      console.log(res.data);
      return res.data
    },err =>{
      console.log('攔截服務器響應錯誤')
      console.log(err)
    })

    // 發送網絡請求
    return instance(config)
}

 

三、使用

// 需要網絡請求的地方導入，使用
import {request} from "./network/request";

request({
  // url: '/home/multidata/aaaaaaaaaaaaa'         // 錯誤請求測試
  url: '/home/multidata'

}).then(res =>{
  console.log('main里面',res);
}).catch(err =>{
  console.log("main里面",err);
})