站長資訊網uniapp使用axios無法請求的解決辦法：首先在根目錄新建一個【axios.js】文件，在該文件中配置一個新的axios；然后使用這個適配器并設置重新發起請求的次數以及每次重新請求的間隔時間。
本教程操作環境：windows7系統、uni-app2.5.1版本，該方法適用于所有品牌電腦。
推薦（免費）：uni-app開發教程
uniapp使用axios無法請求的解決辦法：
在根目錄新建一個axios.js文件，在該文件中配置一個新的axios
import axios from "axios"; const service = axios.create({ withCredentials: true, crossDomain: true, baseURL: '***', timeout: 6000 })
在根目錄建一個lib文件夾，在這個文件夾里建一個adapter.js文件，該文件配置了基于uniapp的axios適配，記得拋出這個適配器
import settle from "axios/lib/core/settle" import buildURL from "axios/lib/helpers/buildURL" /* 格式化路徑 */ const URLFormat = function (baseURL, url) { return url.startsWith("http") ? url : baseURL } /* axios適配器配置 */ const adapter = function (config) { return new Promise((resolve, reject) => { uni.request({ method: config.method.toUpperCase(), url: buildURL(URLFormat(config.baseURL, config.url), config.params, config.paramsSerializer), header: config.headers, data: config.data, dataType: config.dataType, responseType: config.responseType, sslVerify: config.sslVerify, complete: function complete(response) { response = { data: response.data, status: response.statusCode, errMsg: response.errMsg, header: response.header, config: config }; settle(resolve, reject, response); } }) }) } export default adapter;
在根目錄的axios.js文件中，使用這個適配器并設置重新發起請求的次數以及每次重新請求的間隔時間
import adapter from "./lib/adapter" service.defaults.adapter = adapter; service.defaults.retry = 5; // 設置請求次數 service.defaults.retryDelay = 1000;// 重新請求時間間隔
設置一個請求完成后的攔截器，如果響應頭中的狀態碼為200表示成功，將請求得到的數據返回，否則一律視為錯誤請求，需要返回一個Promise。在lib中建立一個axiosError.js在里面處理失敗的請求。
service.interceptors.response.use(res => { if (res.status == 200) { return res; } else { return Promise.reject(res); } }, err => axiosError(err, service))
axiosError.js中需要傳入axios攔截器截到的錯誤以及我們新創建的這個axios，這個錯誤處理頁面只是充當一個分配器的角色，我們可以根據響應頭中的狀態進行處理該錯誤，未處理的錯誤在使用時處理，返回Promise.reject
// 處理401錯誤代碼 import Error401 from "../handlers/401Error"; export default function (err, axios) { const errStatus = err.response.status; if (errStatus == 401) { return Error401(err); // 401沒有權限，重新請求設置token } else { return Promise.reject(err); } }
處理401錯誤代碼，當請求失敗并且響應頭中的狀態碼為401時，是我沒沒有權限去請求，可以根據項目來進行處理，我們是需要攜帶token，所以401為token未攜帶或失效，請求時無需傳入token，axios遇到401會自動攜帶這個token重新去請求。在根目錄建一個handlers文件夾，在里面建一個401Error.js用于處理401的錯誤。
這里使用到Vuex，需要引入Vuex，因為獲取token、設置token的方法以及token都放在里面！！！使用store.dispatch("getToken")得到token后將token設置到請求頭Authorization
import interceptorsError from "../lib/interceptorsError"; import store from 'store/index' /* 需要傳入axios錯誤配置 */ export default function (err, axios) { const config = err.config;// axios請求配置 store.dispatch("getToken").then(function () { config.headers["Authorization"] = store.state.cnrToken.cnr_token; }); err.config = config; return interceptorsError(axios, config); }
一切準備就緒之后需要重新請求，在根目錄建一個interceptorsError.js文件，用于重新執行請求，這個方法需要一個請求配置，只需要把我們上一個請求的配置傳入即可。
export default function (axios, config) { // 如果配置不存在或未設置重試選項，reject if (!config || !config.retry) return Promise.reject(err); // 設置變量以跟蹤重試計數 config.__retryCount = config.__retryCount || 0; // 如果重試次數大于最大重試次數，reject if (config.__retryCount >= config.retry) { return Promise.reject(err); } // 每重試一次記錄一次重試次數 config.__retryCount += 1; // 重試間隔時間 const backoff = new Promise(function (resolve) { setTimeout(function () { resolve(); }, config.retryDelay || 1000); }); return backoff.then(function () { return axios(config); }); }
這是我Vuex中的代碼
/* * @Author: UpYou * @Date: 2020-09-25 16:30:13 * @LastEditTime: 2020-09-25 21:32:56 * @Descripttion: token * */ const state = { cnr_token: '', POST_KEYS: { ...獲取token需要的驗證信息... } }; const mutations = { /* 設置token */ SET_CNRTOKEN(state, Payload) { if (Payload.startsWith("Bearer")) state.cnr_token = Payload; else state.cnr_token = "Bearer" + Payload; } } const actions = { /* 向服務器獲取token */ getToken(context, args) { return new Promise(function (resolve, reject) { uni.request({ url: "token服務器地址", data: { ...context.state.POST_KEYS }, method: "get", async success(res) { await context.commit('SET_CNRTOKEN', res.data.access_token) await resolve(res.data) }, fail: reject }); }) } } export default { state, mutations, actions, }
