uniapp이 axios를 사용하여 요청할 수 없으면 어떻게 해야 하나요?

uniapp이 axios를 사용하여 요청할 수 없는 문제에 대한 해결책: 먼저 루트 디렉터리에 새 [axios.js] 파일을 만들고 파일에 새 axios를 구성한 다음 이 어댑터를 사용하고 다시 시작되는 요청 수를 설정하세요. 그리고 각 재요청 간격 시간.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장(무료): uni-app 개발 튜토리얼

uniapp은 axios를 사용하여 솔루션을 요청할 수 없습니다.

루트 디렉터리에 새 axios.js 파일을 만들고 file 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인 경우 이는 성공을 의미하며 요청은 다음과 같습니다. 데이터가 반환됩니다. 그렇지 않으면 오류 요청으로 간주되어 약속이 반환되어야 합니다. 실패한 요청을 처리하려면 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에 의해 차단된 오류를 전달해야 합니다. 이 오류 처리 페이지는 응답 헤더의 상태에 따라 오류를 처리할 수 있습니다. 요청이 실패하고 응답 헤더의 상태 코드가 401이면 요청을 할 수 있는 권한이 없다는 뜻입니다. 토큰을 운반해야 하므로 401은 토큰이 운반되지 않거나 유효하지 않음을 의미합니다. 요청 시 Axios는 자동으로 토큰을 운반하고 다시 요청합니다. 401을 만났습니다. 루트 디렉터리에 handlers 폴더를 만들고 그 안에 401Error.js를 만들어 401 오류를 처리합니다.

여기서 Vuex를 사용하는데, 토큰 획득, 토큰 설정, 토큰을 모두 담기 때문에 Vuex를 도입해야 합니다! ! ! store.dispatch("getToken")를 사용하여 토큰을 가져오고 토큰을 요청 헤더 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!