Was soll ich tun, wenn Uniapp mit Axios keine Anfrage stellen kann?

Die Lösung für das Problem, dass Uniapp mit Axios keine Anfragen stellen kann: Erstellen Sie zunächst eine neue Datei [axios.js] im Stammverzeichnis und konfigurieren Sie dann ein neues Axios in der Datei und jede Neuanforderungsintervallzeit.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Uniapp kann keine Lösung mit Axios anfordern:

Erstellen Sie eine neue axios.js-Datei im Stammverzeichnis und konfigurieren Sie eine neue Datei in die Datei axios

import axios from "axios";
const service = axios.create({
  withCredentials: true,
  crossDomain: true,
  baseURL: '***',
  timeout: 6000
})

Erstellen Sie einen lib-Ordner im Stammverzeichnis und erstellen Sie eine adaptor.js-Datei in diesem Ordner. Diese Datei konfiguriert die Axios-Anpassung basierend auf uniapp. Denken Sie daran, diesen Adapter

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 im Stammverzeichnis abzulegen Verwenden Sie in der .js-Datei diesen Adapter und legen Sie fest, wie oft Anforderungen erneut initiiert werden sollen, sowie das Intervall zwischen den einzelnen erneuten Anforderungen. Legen Sie einen Interceptor fest, nachdem die Anforderung abgeschlossen ist. Wenn der Statuscode im Antwortheader 200 ist, Dies bedeutet Erfolg und die Anforderung wird zurückgegeben. Andernfalls wird sie als Fehleranforderung betrachtet und es muss ein Versprechen zurückgegeben werden. Erstellen Sie eine axiosError.js in der Bibliothek, um fehlgeschlagene Anfragen zu verarbeiten.

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

axiosError.js muss den vom Axios-Interceptor abgefangenen Fehler übergeben und die neu erstellte Axios-Seite fungiert nur als Verteiler. Wir können den Fehler entsprechend dem Status im Antwortheader behandeln Wird während der Verwendung verarbeitet und Promise.reject

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

wird zurückgegeben, um den 401-Fehlercode zu verarbeiten. Wenn die Anfrage fehlschlägt und der Statuscode im Antwortheader 401 ist, bedeutet dies, dass ich keine Berechtigung habe, die Anfrage zu stellen Wir müssen das Token entsprechend dem Projekt verarbeiten, daher bedeutet 401, dass das Token nicht übertragen wird oder ungültig ist. Axios wird das Token bei der Anforderung automatisch übertragen Begegnung mit 401. Erstellen Sie im Stammverzeichnis einen Ordner „handlers“ und darin eine Datei „401Error.js“, um 401-Fehler zu behandeln.

Vuex wird hier verwendet, und Vuex muss eingeführt werden, da die Methoden zum Erhalten von Token, Festlegen von Token und Token alle darin platziert sind! ! ! Verwenden Sie store.dispatch("getToken"), um das Token abzurufen und das Token auf den Anforderungsheader 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);
  }
}

zu setzen. Nachdem alles fertig ist, müssen Sie erneut eine Datei interceptorsError.js im Stammverzeichnis erstellen, um sie erneut auszuführen Die Anfrage erfordert eine Konfiguration. Um eine Anfrage zu stellen, müssen wir nur die Konfiguration unserer vorherigen Anfrage übergeben.

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

Das ist mein Code in 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);
  });
}

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Uniapp mit Axios keine Anfrage stellen kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!