umi使用plugin-request進行請求的全局配置

這是官方文檔對這個插件的描述

一般情況下我們之前寫過的項目都會實例化一個request對象，進行配置，比如配置響應攔截和請求攔截 ，會在utils文件夾下新建一個request.js文件來實例化出一個request對象，配置錯誤處理以及攔截器等等，然后把這個實例化出來的對象引入每個頁面的service文件里，進行接口請求。

但是今天說說umi里面對request進行全局配置的方法，在app.jsx文件里面寫入，錯誤提示是支持多語言環境的，所以先寫好一個json文件：

const httpErrorMessage = {
  'en-US': {
    200: 'The server successfully returned the requested data.',
    201: 'Data is created or modified successfully. Procedure',
    202: 'A request has been queued in the background (asynchronous task).',
    204: 'Succeeded in deleting data. Procedure',
    400: 'The server did not create or modify data.',
    401: 'User does not have permission (wrong token, username, password).',
    403: 'The user is authorized, but access is prohibited.',
    404: 'The request was made for a nonexistent record, and the server did not act on it.',
    406: 'The requested format is not available.',
    410: 'The requested resource is permanently deleted and will not be retrieved.',
    422: 'A validation error occurred while creating an object.',
    500: 'An error occurred on the server. Check the server.',
    502: 'Gateway error.',
    503: 'The service is unavailable, the server is temporarily overloaded or maintained.',
    504: 'The gateway timed out.',
  },
  'zh-CN': {
    200: '服務器成功返回請求的數據。',
    201: '新建或修改數據成功。',
    202: '一個請求已經進入后台排隊（異步任務）。',
    204: '刪除數據成功。',
    400: '發出的請求有錯誤，服務器沒有進行新建或修改數據的操作。',
    401: '用戶沒有權限（令牌、用戶名、密碼錯誤）。',
    403: '用戶得到授權，但是訪問是被禁止的。',
    404: '發出的請求針對的是不存在的記錄，服務器沒有進行操作。',
    406: '請求的格式不可得。',
    410: '請求的資源被永久刪除，且不會再得到的。',
    422: '當創建一個對象時，發生一個驗證錯誤。',
    500: '服務器發生錯誤，請檢查服務器。',
    502: '網關錯誤。',
    503: '服務不可用，服務器暫時過載或維護。',
    504: '網關超時。',
  }
}

　　在官方文檔說明里面，是支持配置這幾項的，該配置返回一個對象。除了 errorConfig 和 middlewares 以外其它配置都是直接透傳 umi-request 的全局配置。：

export const request = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
};

　　我使用了錯誤處理和攔截器：

const lang = getLocale() // zh-CN | en-US
// 服務器請求錯誤狀態處理
const errorHandler = (error) => {
  const { response } = error;
  if (response && response.status) {
    const errorText = httpErrorMessage[lang][response.status] || response.statusText;
    message.error({
      content: errorText,
    });
  } 
  return response;
};
export const request = {
  errorHandler,
  requestInterceptors: [    // 請求攔截器，接收數組，可設置多個攔截器
    (_, options) => {
      return {
        options: {
          ...options,
          headers: {
            ...(options?.headers ?? {}),
            Authorization: `bearer ${initialState?.auth?.[0]?.id_token}`,    // 這里獲取自己的token攜帶在請求頭上
          },
        },
      };
    },
  ],
  responseInterceptors: [  // 相應攔截器，也接受數組
    async (response) => {
      if (response) {
        if (response.status === 401) {   // token過期的時候自動刷新獲取新的token自動登錄，當然這是根據自己頁面的需求決定，大多都是token過期跳轉登錄頁面，重新登陸
          
        }
        if (response.status === 200) {  // 后端規定了一些自定義返回的errorCode碼，返回后端的自定義提示信息
          const data = await response.clone().json();
          if (data && data.messageCode) {
            const errorText = codeErrorMessage[lang][data.messageCode] || codeErrorMessage[lang][10000];          //  codeErrorMessage支持多語言環境的json文件，和httpErrorMessage 一樣寫法
            message.error({
              content: errorText,
            })
          }
        }
      } else {
        message.error({
          content: lang == 'zh-CN' ? '您的網絡發生異常，無法連接服務器' : 'Your network is abnormal and you cannot connect to the server',
        })
      }
      return response;
    },
  ],
};

　　

就醬，配置情況都是根據自己項目需求，就完成了全局配置
有問題看文檔，多看文檔~~

版權聲明：本文為CSDN博主「慢半拍、」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/huanhuan03/article/details/120652598