axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中。
在前端框架中的應用也是特別廣泛，不管是vue還是react，都有很多專案用axios作為網路請求庫。
我在最近的幾個專案中都有使用axios，並基於axios根據常見的業務場景封裝了乙個通用的request服務。
業務場景：
全域性請求配置。
get,post,put,delete等請求的promise封裝。
全域性請求狀態管理。
取消重複請求。
路由跳轉取消當前頁面請求。
請求攜帶token，許可權錯誤統一管理。
定義全域性的預設配置
axios.defaults.timeout = 10000 //超時取消請求
axios.defaults.baseurl = process.env.base_url //掛載在process下的環境常量，在我另一篇文章有詳細說明
自定義配置（非常見業務場景，僅作介紹）
// 建立例項時設定配置的預設值
var instance = axios.create();
// 在例項已建立後修改預設值
instance.defaults.headers.common['authorization'] = auth_token;
請求***及取消重複請求
// 請求列表
const requestlist =
// 取消列表
const canceltoken = axios.canceltoken
let sources = {}
axios.interceptors.request.use((config) => )
//1.判斷請求是否已存在請求列表，避免重複請求，將當前請求新增進請求列表陣列；
if(requestlist.includes(request))else)
} //3.從store中獲取token並新增到請求頭供後端作許可權校驗
const token = store.getters.userinfo.token
if (token)
return config
}, function (error) )
2.請求一旦開始，就可以開啟動畫載入效果。
3.使用者登入後可以在請求頭中攜帶token做許可權校驗使用。
響應***
axios.interceptors.response.use(function (response) )
} // 3.統一處理許可權認證錯誤管理
if (response.data.code === 900401)
return response
}, function (error) )
throw new axios.cancel('cancel request')
} else
return promise.reject(error)
})
2.當請求列表為空時，即所有請求結束，載入動畫結束
3.許可權認證報錯統一攔截處理
4.取消請求的處理需要結合其他**說明
5.由於專案後端並沒有採用restful風格的介面請求，200以外都歸為網路請求失敗
const request = function (url, params, config, method) , config)).then(response => , err => else
}).catch(err => )
})}const post = (url, params, config = {}) =>
const get = (url, params, config = {}) =>
//3.匯出cancel token列表供全域性路由守衛使用
export
2.存入需要取消的請求列表匯出給導航守衛使用
3.路由發生變化的時候取消當前頁面還沒有返回結果的請求，在複雜的頁面中請求可能會有很多個，增加取消請求的功能可以讓頁面切換的時候不卡頓。
/src/router.js
...
import from '../service/request'
...router.beforeeach((to, from, next) => )
for (var key in sources)
next()
})
// 引入網路請求庫
import axios from 'axios'
import store from '../store'
import router from '../router'
// 請求列表
const requestlist =
// 取消列表
const canceltoken = axios.canceltoken
let sources = {}
// axios.defaults.timeout = 10000
axios.defaults.baseurl = process.env.base_url
axios.interceptors.request.use((config) => )
if(requestlist.includes(request))else)
} const token = store.getters.userinfo.token
if (token)
return config
}, function (error) )
axios.interceptors.response.use(function (response) )
} if (response.data.code === 900401)
return response
}, function (error) )
throw new axios.cancel('cancel request')
} else
return promise.reject(error)
})const request = function (url, params, config, method) , config)).then(response => , err => else
}).catch(err => )
})}const post = (url, params, config = {}) =>
const get = (url, params, config = {}) =>
export
excel 時間戳 基於業務場景下的Excel使用
背景 如何 基於以下業務邏輯,本文將利用excel集中練習 2,3,4 三個方面,初步掌握excel基本操作和初步理解基於業務場景的資料分析步驟.資料集 1 熟悉資料集 1 在 和天貓平台上購買嬰兒用品的使用者資料集,資料集包含兩個excel檔案 表1購買商品 sample sam tianchi ...
Vue基於axios的二次封裝
主要目的 速度快，好維護，好修改，好擴充套件，好開發 模組分析 初始化模組 請求生成模組 請求控制模組 請求處理模組 設計思路 功能分析 板塊梳理 架構基礎 功能構建 直接上 吧 import axios from axios main.js檔案 注入main.js import a from by...
多租戶使用者管理系統中常見的業務場景
在多租戶使用者管理系統中，常見的業務場景有以下幾種 使用者註冊 使用者通過填寫手機號碼等資訊，進行註冊操作 該場景這重驗證使用者手機號碼的有效性，一般通過簡訊驗證碼進行驗證 租戶註冊 使用者通過填寫租戶的相關資訊，註冊租戶，該使用者預設為租戶的超級管理員。該場景注重收集租戶的相關資訊 使用者登入 通...