還不會封裝axios？戳這裡

2021-10-25 03:08:19 字數 2331 閱讀 5698

自從官方停止維護 vue resource之後，axios成為了大家與後端互動獲取資料的最佳選擇，做為vue官方推薦的http庫，它有很多優秀特性，並且給開發者提供了很多二次開發的可能，關於更多，大家可以去查一下官方文件。

接下來我們說說專案中對axios常做的封裝攔截：

npm install axios
封裝的axios一般是在專案的 src 目錄下邊新建 request資料夾，新建乙個request.js檔案，內容如下：

// 引入axios


import axios from 'axios';


import qs from 'qs'; // 這裡的 qs是node的乙個模組，用來序列化資料


import  from 'mint-ui'; // toast是mint-ui的提示元件，也可以使用其他ui庫或者自定義
axios提供了interceptors供攔截處理，interceptors有兩個攔截方式：

一是axios.interceptors.request.use()是傳送請求之前的攔截，通過它我們可以設定api介面的一些東西，如根據環境不同設定不同網域名稱、設定header 的cookie 值等等；

// 先導入vuex,因為我們要使用到裡面的狀態物件


// vuex的路徑根據自己的路徑去寫


import store from '@/store/index';


// 請求***


axios.interceptors.request.use(    


config => ,    


error => )
另乙個是axios.interceptors.response.use()這是請求介面之後，對介面返回資料進行攔截。主要是方便統一處理請求返回的資料，可根據後端統一的介面文件進行處理，如正常返回資料是，status值為200，未登入時status值為400等等，後端介面報錯也可以通過msg返回，在這裡攔截，統一toast給使用者。

// 響應***


axios.interceptors.response.use(    


response =>  else     


},    


// 伺服器狀態碼不是2開頭的的情況


// 這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼    


// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等


// 下面列舉幾個常見的操作，其他需求可自行擴充套件


error => 


});break;


// 403 token過期


// 登入過期對使用者進行提示


// 清除本地token和清空vuex中token物件


// 跳轉登入頁面                


case 403:


toast();


// 清除token


localstorage.removeitem('token');


store.commit('loginsuccess', null);


// 跳轉登入頁面，並將要瀏覽的頁面fullpath傳過去，登入成功後跳轉需要訪問的頁面 


settimeout(() =>                         


});                    


}, 1000);                    


break; 


// 404請求不存在


case 404:


toast();


break;


// 其他錯誤，直接丟擲錯誤提示


default:


toast();


}return promise.reject(error.response);


}}    


});
在src目錄下新建 名為api的資料夾，裡邊可存放各個子專案的介面檔案，新建 test1.js 來做例子：

test1.js：

import request from "../request/request.js";


// test1專案-詳情頁


export function getdetail()
然後，在專案中就可以將 getdetail 介面import進去使用拉，如下：

import  from '@/src/api/test1.js'; // 路徑是你自己的路徑
各個專案分別新建檔案儲存，統一放在api資料夾下，方便後期統一管理，找起來也方便。

axios基礎封裝

script新建axios資料夾，新建index.js fetch.js fetch.js如下 index.js如下 引入fetch.js檔案 import from fetch 定義獲取資料的函式getdata 其中url,type,data對應fetch config 中的config expo...

axios封裝使用

記錄專案中使用過的axios封裝，以便下次使用。import axios from axios 引用axios import from util util 引用剛才我們建立的util.js檔案，並使用getcookie方法 import qs from qs 很重要！過濾json格式化 axios ...

axios詳細封裝

我們採取封裝分類管理舉個栗子 新建資料夾utils 裡面新建url.js 全站http的配置 全站http配置 axios引數說明 isserialize是否開啟form表單提交 istoken是否需要token 新增乙個響應 axios interceptors response use func...