Que dois-je faire si Uniapp ne peut pas demander en utilisant axios ?

La solution au problème qu'uniapp ne peut pas demander en utilisant axios : créez d'abord un nouveau fichier [axios.js] dans le répertoire racine et configurez un nouvel axios dans le fichier, puis utilisez cet adaptateur et définissez le nombre de ; les heures pour relancer les demandes et le temps entre chaque nouvelle demande.

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé (gratuit) : Tutoriel de développement d'uni-app

Solution au problème qu'uniapp ne peut pas requête en utilisant la méthode axios :

Créez un nouveau fichier axios.js dans le répertoire racine, et configurez un nouvel axios dans le fichier

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

Créez un dossier lib dans le répertoire racine, et dans ce dossier Créez un fichier adapter.js dans le fichier, qui configure l'adaptation axios basée sur uniapp. N'oubliez pas de jeter cet adaptateur

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;

dans le fichier axios.js du répertoire racine, utilisez cet adaptateur et définir la demande de réinitiation Le nombre de fois et l'intervalle entre chaque re-demande

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

Définir un intercepteur une fois la demande terminée Si le code d'état dans l'en-tête de réponse est 200, cela signifie le succès, et les données obtenues par la demande seront renvoyées, sinon cela sera considéré comme une demande d'erreur et il faudra renvoyer une promesse. Créez un axiosError.js dans la bibliothèque pour gérer les requêtes ayant échoué.

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

axiosError.js doit transmettre l'erreur interceptée par l'intercepteur axios et l'axios nouvellement créé. Cette page de gestion des erreurs agit uniquement en tant que distributeur. Nous pouvons procéder en fonction du statut dans l'en-tête de réponse. l'erreur. Les erreurs non gérées sont gérées lorsqu'elles sont utilisées, et 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);
  }
}

est renvoyé pour gérer le code d'erreur 401. Lorsque la demande échoue et que le code d'état dans l'en-tête de réponse est 401, je n'ai pas le code d'erreur. autorisation de faire la demande. , qui peut être traitée en fonction du projet. Nous devons transporter le jeton, donc 401 signifie que le jeton n'est pas transporté ou n'est pas valide. Il n'est pas nécessaire de transmettre le jeton lors de la demande. transportez le jeton et faites une nouvelle demande lorsque vous rencontrez 401. Créez un dossier de gestionnaires dans le répertoire racine et créez-y un 401Error.js pour gérer les erreurs 401.

Vuex est utilisé ici, et Vuex doit être introduit, car les méthodes d'obtention de jetons, de définition de jetons et de jetons y sont toutes placées ! ! ! Utilisez store.dispatch("getToken") pour obtenir le jeton et définissez le jeton sur l'en-tête de la demande Autorisation

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

Une fois que tout est prêt, vous devez refaire une demande. Créez un fichier interceptorsError.js dans le fichier interceptorsError.js. répertoire racine pour réexécuter la requête. Cette méthode nécessite une configuration de la requête, et il nous suffit de transmettre la configuration de notre requête précédente.

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

Voici mon code dans 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,
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!