uniapp が axios を使用してリクエストできない場合はどうすればよいですか?

uniapp が axios を使用してリクエストできない問題の解決策: まず、ルート ディレクトリに新しい [axios.js] ファイルを作成し、そのファイル内に新しい axios を設定します。次に、このアダプターを使用して、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フォルダを作成し、このフォルダー内に、uniapp に基づいて axios アダプテーションを構成する、adapter.js ファイルを作成します。このアダプターをスローすることを忘れないでください

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を返却する必要があります。失敗したリクエストを処理するために、ライブラリに 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 エラー コードを処理するために 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 はトークンが運ばれていない、または無効であることを意味します。リクエスト時にトークンを渡す必要はありません。Axios は自動的にトークンを使用し、401 が発生した場合は再度リクエストを実行します。ルート ディレクトリに handlers フォルダーを作成し、その中に 401 エラーを処理するための 401Error.js を作成します。

ここでは Vuex が使用されていますが、トークンの取得、トークンの設定、トークンのメソッドがすべて Vuex に配置されているため、Vuex を導入する必要があります。 ！ ！ store.dispatch("getToken") を使用してトークンを取得し、そのトークンをリクエスト ヘッダーに設定します。 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);
}

すべての準備ができたら、再度リクエストを行う必要があります。このメソッドにはリクエストの構成が必要ですが、前のリクエストの構成を渡すだけで済みます。

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,
}

以上がuniapp が axios を使用してリクエストできない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。