建設(shè)綜合購物網(wǎng)站建站abc
可以直接在antdPro項(xiàng)目的app.tsx文件中對request進(jìn)行運(yùn)行時(shí)配置,并且該配置會(huì)直接透傳到umi-request的全局配置。后續(xù)直接從umi中引入request或者useRequest直接使用,可以說是非常方便。文檔可查看:umi.js
具體配置代碼:
import { history, Link, RequestConfig } from 'umi';
/**** 對request進(jìn)行運(yùn)行時(shí)配置,并且該配置會(huì)直接透傳到umi-request的全局配置。* 后續(xù)直接從umi中引入request或者useRequest直接使用,可以說是非常方便。*/
/** 請求攔截 */
const requestInterceptor = (url: any, options: any): any => {const headers = {...options.headers,//此處需要修改一下邏輯判斷Authorization: localStorage.getItem('token') || '1213',};return {url: url,options: { ...options, headers: headers },};
};
/** 響應(yīng)攔截 */
const responseInterceptors = (response: any, options: any): any => {if (response.status !== 200) {switch (response.status) {case 401:history.push('/login');break;}}return response;
};
/** 異常處理程序 */
const codeMessage = {200: '服務(wù)器成功返回請求的數(shù)據(jù)。',201: '新建或修改數(shù)據(jù)成功。',202: '一個(gè)請求已經(jīng)進(jìn)入后臺(tái)排隊(duì)(異步任務(wù))。',204: '刪除數(shù)據(jù)成功。',400: '發(fā)出的請求有錯(cuò)誤,服務(wù)器沒有進(jìn)行新建或修改數(shù)據(jù)的操作。',401: '用戶沒有權(quán)限(令牌、用戶名、密碼錯(cuò)誤)。',403: '用戶得到授權(quán),但是訪問是被禁止的。',404: '發(fā)出的請求針對的是不存在的記錄,服務(wù)器沒有進(jìn)行操作。',406: '請求的格式不可得。',410: '請求的資源被永久刪除,且不會(huì)再得到的。',422: '當(dāng)創(chuàng)建一個(gè)對象時(shí),發(fā)生一個(gè)驗(yàn)證錯(cuò)誤。',500: '服務(wù)器發(fā)生錯(cuò)誤,請檢查服務(wù)器。',502: '網(wǎng)關(guān)錯(cuò)誤。',503: '服務(wù)不可用,服務(wù)器暫時(shí)過載或維護(hù)。',504: '網(wǎng)關(guān)超時(shí)。',
};
const errorHandler = (error: any) => {const { response } = error;if (response && response.status) {const errorText = codeMessage[response.status] || response.statusText;const { status, url } = response;throw new Error(`請求錯(cuò)誤 ${status}: ${url}${errorText}`);} else if (!response) {throw new Error('您的網(wǎng)絡(luò)發(fā)生異常,無法連接服務(wù)器');}return response;
};// request運(yùn)行時(shí)配置
export const request: RequestConfig = {timeout: 30000, //請求超時(shí)時(shí)間// prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', // 統(tǒng)一的請求前綴// 自定義端口規(guī)范(可以對后端返回的數(shù)據(jù)格式按照我們的需求進(jìn)行處理)errorConfig: {adaptor: (resData) => {debugger;return {...resData,};},},middlewares: [],errorHandler: (error) => {errorHandler(error);}, //請求錯(cuò)誤處理requestInterceptors: [requestInterceptor], //請求攔截responseInterceptors: [responseInterceptors], //響應(yīng)攔截
};
/**------------------------------------------------------------------配置結(jié)束請求攔截------------------------------------------ */
?
這段代碼是一個(gè)請求配置對象 `request`,其中包含了請求攔截、響應(yīng)攔截和異常處理的相關(guān)邏輯。這些邏輯會(huì)在發(fā)起請求和接收響應(yīng)時(shí)進(jìn)行處理。
首先,定義了一個(gè) `requestInterceptor` 函數(shù)用于請求攔截。該函數(shù)會(huì)將存儲(chǔ)在本地存儲(chǔ)中的令牌添加到請求頭的 `token` 字段中,并將修改后的請求頭放入 `options` 中返回。
接下來,定義了一個(gè) `responseInterceptors` 函數(shù)用于響應(yīng)攔截。該函數(shù)會(huì)在響應(yīng)狀態(tài)碼不為 200 時(shí)進(jìn)行處理。其中,當(dāng)響應(yīng)狀態(tài)碼為 401 時(shí),會(huì)導(dǎo)航到登錄頁面并彈出提示信息。
然后,定義了一個(gè)異常處理程序 `errorHandler`。該程序會(huì)根據(jù)響應(yīng)狀態(tài)碼來判斷異常類型,并拋出相應(yīng)的錯(cuò)誤信息。
接下來,定義了一個(gè) `codeMessage` 對象,它存儲(chǔ)了一些常見的響應(yīng)狀態(tài)碼和對應(yīng)的錯(cuò)誤消息。
最后,定義了一個(gè) `request` 對象,包含了一些運(yùn)行時(shí)配置。其中包括了請求超時(shí)時(shí)間、錯(cuò)誤處理函數(shù)、請求攔截器和響應(yīng)攔截器等。
需要注意的是,這段代碼可能還需要引入一些外部依賴,比如 `localStorage` 和 `history`。你需要根據(jù)你的實(shí)際環(huán)境和需求進(jìn)行適配和修改。
總之,這段代碼封裝了請求攔截、響應(yīng)攔截和異常處理的邏輯,將它們作為配置項(xiàng)進(jìn)行統(tǒng)一管理。
?后續(xù)使用直接從umi中引入request 或者 useRequest,配置即生效
//后續(xù)使用直接從umi中引入request 或者 useRequest,配置即生效import { request } from 'umi';export function login(body: API.LoginParams, options?: Record<string, any>) {return request<API.LoginResult>('/devServer/users/login', {method: 'POST',headers: {'Content-Type': 'application/json',},data: body,...(options || {}),});
}
?
這段代碼是一個(gè)登錄請求的示例代碼。它使用了之前定義的 `request` 對象來發(fā)送登錄請求。
在 `login` 函數(shù)中,通過 `request` 對象發(fā)送了一個(gè) POST 請求到 `/devServer/users/login` 接口。請求的主體內(nèi)容是 `body` 參數(shù),請求頭中設(shè)置了 `Content-Type` 為 `application/json`。`options` 參數(shù)可以傳入額外的請求配置,如超時(shí)時(shí)間等。
`request` 函數(shù)返回一個(gè) Promise 對象,該 Promise 對象的泛型參數(shù)指定了響應(yīng)數(shù)據(jù)的類型為 `API.LoginResult`。
使用這段代碼時(shí),你需要根據(jù)實(shí)際情況修改請求的接口地址和請求體的類型。
總之,這段代碼使用了之前定義的 `request` 對象來發(fā)送登錄請求,并返回一個(gè) Promise 對象,以便后續(xù)處理響應(yīng)數(shù)據(jù)。