這篇文章帶給大家的內容是關於axios是什麼？ axios是基於業務場景的二次封裝詳解（範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
axios 是基於 promise 的 HTTP 函式庫，可以用在瀏覽器和 node.js 中。
在前端框架中的應用也特別廣泛，不管是vue還是react，都有很多專案用axios作為網路請求庫。
我在最近的幾個專案中都有使用axios，並基於axios根據常見的業務場景封裝了一個通用的request服務。
業務場景：
全域請求設定。
get,post,put,delete等請求的promise封裝。
全域請求狀態管理，供載入動畫等使用。
路由跳轉取消目前頁面請求。
請求攜帶token，權限錯誤統一管理。
定義全域的預設設定
axios.defaults.timeout = 10000 //超时取消请求 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' axios.defaults.baseURL = process.env.BASE_URL //挂载在process下的环境常量，
自訂設定（非常見業務場景，僅作介紹）
// 创建实例时设置配置的默认值 var instance = axios.create({ baseURL: 'https://api.another.com' }); // 在实例已创建后修改默认值 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
優先：自訂設定> 預設設定
請求攔截器
// 请求列表 const requestList = [] axios.interceptors.request.use((config) => { //1.将当前请求的URL添加进请求列表数组 requestList.push(config.url) //2.请求开始，改变loading状态供加载动画使用 store.dispatch('changeGlobalState', {loading: true}) //3.从store中获取token并添加到请求头供后端作权限校验 const token = store.getters.userInfo.token if (token) { config.headers.token = token } return config }, function (error) { return Promise.reject(error) })
1.請求攔截器中將所有請求的url新增進請求清單變量，為取消請求及loading狀態管理做準備
2.請求一旦開始，就可以開啟動畫載入效果。
3.使用者登入後可以在請求頭中攜帶token做權限校驗使用
回應攔截器
axios.interceptors.response.use(function (response) { // 1.将当前请求中请求列表中删除 requestList.splice(requestList.findIndex(item => item === response.config.url), 1) // 2.当请求列表为空时，更改loading状态 if (requestList.length === 0) { store.dispatch('changeGlobalState', {loading: false}) } // 3.统一处理权限认证错误管理 if (response.data.code === 900401) { window.ELEMENT.Message.error('认证失效，请重新登录！', 1000) router.push('/login') } return response }, function (error) { // 4.处理取消请求 if (axios.isCancel(error)) { requestList.length = 0 store.dispatch('changeGlobalState', {loading: false}) throw new axios.Cancel('cancel request') } else { // 5.处理网络请求失败 window.ELEMENT.Message.error('网络请求失败', 1000) } return Promise.reject(error) })
1.回應返回後將對應的請求從請求清單中刪除
2.當請求清單為空時，即所有請求結束，載入動畫結束
3.權限認證報錯統一攔截處理
4.取消請求的處理需要結合其他程式碼說明
#5.由於專案後端並沒有採用RESTful風格的介面請求，200以外都歸為網路請求失敗
const CancelToken = axios.CancelToken //cancel token列表 let sources = [] const request = function (url, params, config, method) { return new Promise((resolve, reject) => { axios[method](url, params, Object.assign({}, config, { //1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token cancelToken: new CancelToken(function executor (c) { //2.将cancel token存入列表 sources.push(c) }) })).then(response => { resolve(response.data) }, err => { if (err.Cancel) { console.log(err) } else { reject(err) } }).catch(err => { reject(err) }) }) } const post = (url, params, config = {}) => { return request(url, params, config, 'post') } const get = (url, params, config = {}) => { return request(url, params, config, 'get') } //3.导出cancel token列表供全局路由守卫使用 export {sources, post, get}
1.axios cancel token API
2.存入需要取消的請求清單匯出給導航守衛使用
3.router.js
... import { sources } from '../service/request' ... router.beforeEach((to, from, next) => { document.title = to.meta.title || to.name //路由发生变化时取消当前页面网络请求 sources.forEach(item => { item() }) sources.length = 0 next() })
// 引入网络请求库 https://github.com/axios/axios import axios from 'axios' import store from '../store' import router from '../router' // axios.defaults.timeout = 10000 const requestList = [] axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' axios.defaults.baseURL = process.env.BASE_URL // 自定义拦截器 axios.interceptors.request.use((config) => { requestList.push(config.url) store.dispatch('changeGlobalState', {loading: true}) const token = store.getters.userInfo.token if (token) { config.headers.token = token } return config }, function (error) { return Promise.reject(error) }) axios.interceptors.response.use(function (response) { requestList.splice(requestList.findIndex(item => item === response.config.url), 1) if (requestList.length === 0) { store.dispatch('changeGlobalState', {loading: false}) } if (response.data.code === 900401) { window.$toast.error('认证失效，请重新登录！', 1000) router.push('/login') } return response }, function (error) { requestList.length = 0 store.dispatch('changeGlobalState', {loading: false}) if (axios.isCancel(error)) { throw new axios.Cancel('cancel request') } else { window.$toast.error('网络请求失败！', 1000) } return Promise.reject(error) }) const CancelToken = axios.CancelToken let sources = [] const request = function (url, params, config, method) { return new Promise((resolve, reject) => { axios[method](url, params, Object.assign(config, { cancelToken: new CancelToken(function executor (c) { sources.push(c) }) })).then(response => { resolve(response.data) }, err => { reject(err) }).catch(err => { reject(err) }) }) } const post = (url, params, config = {}) => { return request(url, params, config, 'post') } const get = (url, params, config = {}) => { return request(url, params, config, 'get') } export {sources, post, get}
以上。
以上是axios是什麼？ axios是基於業務場景的二次封裝詳解（範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
