uniapp使用axios無法要求怎麼辦

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;

設定一個請求完成後的攔截器，如果回應頭中的狀態碼為200表示成功，將請求得到的資料傳回，否則一律視為錯誤請求，需要返回一個Promise。在lib中建立一個axiosError.js在裡面處理失敗的請求。

import adapter from "./lib/adapter"
service.defaults.adapter = adapter;
service.defaults.retry = 5; // 设置请求次数
service.defaults.retryDelay = 1000;// 重新请求时间间隔

axiosError.js中需要傳入axios攔截器截取的錯誤以及我們新建立的這個axios，這個錯誤處理頁面只是充當一個分配器的角色，我們可以根據回應頭中的狀態進行處理該錯誤，未處理的錯誤在使用時處理，返回Promise.reject

service.interceptors.response.use(res => {
  if (res.status == 200) {
    return res;
  } else {
    return Promise.reject(res);
  }
}, err => axiosError(err, service))

處理401錯誤代碼，當請求失敗並且響應頭中的狀態碼為401時，是我沒有沒有權限去請求，可以根據項目來進行處理，我們是需要攜帶token，所以401為token未攜帶或失效，請求時無需傳入token，axios遇到401會自動攜帶這個token重新去請求。在根目錄建一個handlers資料夾，在裡面建一個401Error.js用來處理401的錯誤。

這裡使用到Vuex，需要引入Vuex，因為取得token、設定token的方法以及token都放在裡面！ ！ ！使用store.dispatch("getToken")得到token後將token設定到請求頭Authorization

// 处理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);
  }
}

一切準備就緒之後需要重新請求，在根目錄建立一個interceptorsError.js文件，用於重新執行請求，這個方法需要一個請求配置，只需要把我們上一個請求的配置傳入即可。

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);
}

這是我Vuex中的程式碼

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);
  });
}

以上是uniapp使用axios無法要求怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！