Axios Exception Interceptor - Some request custom handling exceptions Author: Chuwen Time: 2023-02-24 Classification: TypeScript <trans data-src="## 现状">##Current situation</trans> <trans data-src="项目当前的 `request.ts`:">Current 'request. ts' of the project:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import toast from "./toast"">import toast from "./toast"</trans> <trans data-src="const request = axios.create({">const request = axios.create({</trans> <trans data-src="baseURL: "">baseURL: "</trans> <trans data-src="https://api.nowtime.cc">https://api.nowtime.cc</trans> <trans data-src="",">",</trans> <trans data-src="responseType: "json",">responseType: "json",</trans> <trans data-src="timeout: 12_000">timeout: 12_000</trans> <trans data-src="})">})</trans> <trans data-src="// 响应拦截器">//Response interceptor</trans> <trans data-src="request.interceptors.response.use(">request.interceptors.response.use(</trans> <trans data-src="response => {">response => {</trans> <trans data-src="// TODO 响应拦截器相关操作">//TODO response interceptor related operations</trans> <trans data-src="return response">return response</trans> <trans data-src="},">},</trans> <trans data-src="error => {">error => {</trans> <trans data-src="// 处理网络错误">//Handling network errors</trans> <trans data-src="if (">if (</trans> <trans data-src="error.code === "ECONNABORTED"">error.code === "ECONNABORTED"</trans> <trans data-src="|| error.message === "Network Error"">|| error.message === "Network Error"</trans> <trans data-src="|| error.message.includes("timeout")">|| error.message.includes("timeout")</trans> <trans data-src=") {">) {</trans> <trans data-src="toast("Network timeout", 5e3, true)">toast("Network timeout", 5e3, true)</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="if (error.response) {">if (error.response) {</trans> <trans data-src="// TODO 处理 API 响应的错误">//TODO processing API response error</trans> <trans data-src="const { status } = error.response">const { status } = error.response</trans> <trans data-src="if (status === 500) {">if (status === 500) {</trans> <trans data-src="toast("Server error", 5e3)">toast("Server error", 5e3)</trans> <trans data-src="}">}</trans> <trans data-src="// ......">// ......</trans> <trans data-src="}">}</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src=")">)</trans> <trans data-src="export default request">export default request</trans> <trans data-src="```">```</trans> <trans data-src="但是上面的代码有些弊端，比如有一些请求需要自定义处理异常的，并不需要弹出 `toast`，那么我们就需要这么去实现">However, there are some drawbacks in the above code. For example, if there are some requests that need custom exception handling, and 'toast' does not need to pop up, then we need to do so</trans> <trans data-src="## 实现代码">##Implementation code</trans> <trans data-src="新增 `axios.ts` 文件，并粘贴如下代码：">Add the 'axios. ts' file and paste the following code:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import "axios"">import "axios"</trans> <trans data-src="declare module "axios" {">declare module "axios" {</trans> <trans data-src="// 扩展 AxiosRequestConfig interface">//Extension of AxiosRequestConfig interface</trans> <trans data-src="export interface AxiosRequestConfig {">export interface AxiosRequestConfig {</trans> <trans data-src="catchHandler?: ">catchHandler?: </trans> <trans data-src="boolean;// ">boolean;// </trans> <trans data-src="是否开启自动处理异常">Whether to enable automatic exception handling</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="`request.ts`:">`request.ts`:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import toast from "./toast"">import toast from "./toast"</trans> <trans data-src="const request = axios.create({">const request = axios.create({</trans> <trans data-src="baseURL: "">baseURL: "</trans> <trans data-src="https://api.nowtime.cc">https://api.nowtime.cc</trans> <trans data-src="",">",</trans> <trans data-src="responseType: "json",">responseType: "json",</trans> <trans data-src="timeout: 12_000">timeout: 12_000</trans> <trans data-src="})">})</trans> <trans data-src="// 响应拦截器">//Response interceptor</trans> <trans data-src="request.interceptors.response.use(">request.interceptors.response.use(</trans> <trans data-src="response => {">response => {</trans> <trans data-src="// TODO 响应拦截器相关操作">//TODO response interceptor related operations</trans> <trans data-src="return response">return response</trans> <trans data-src="},">},</trans> <trans data-src="error => {">error => {</trans> <trans data-src="// 处理网络错误">//Handling network errors</trans> <trans data-src="if (">if (</trans> <trans data-src="error.code === "ECONNABORTED"">error.code === "ECONNABORTED"</trans> <trans data-src="|| error.message === "Network Error"">|| error.message === "Network Error"</trans> <trans data-src="|| error.message.includes("timeout")">|| error.message.includes("timeout")</trans> <trans data-src=") {">) {</trans> <trans data-src="toast("Network timeout", 5e3, true)">toast("Network timeout", 5e3, true)</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="// 判断当前请求 config 是否进行同一处理异常">//Judge whether the current request config processes the same exception</trans> <trans data-src="// false：不进行同一错误处理">//False: Do not handle the same error</trans> <trans data-src="if (Object.hasOwn(error.config, "catchHandler") && error.config.catchHandler === false) {">if (Object.hasOwn(error.config, "catchHandler") && error.config.catchHandler === false) {</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="if (error.response) {">if (error.response) {</trans> <trans data-src="// TODO 处理 API 响应的错误">//TODO processing API response error</trans> <trans data-src="const { status } = error.response">const { status } = error.response</trans> <trans data-src="if (status === 500) {">if (status === 500) {</trans> <trans data-src="toast("Server error", 5e3)">toast("Server error", 5e3)</trans> <trans data-src="}">}</trans> <trans data-src="// ......">// ......</trans> <trans data-src="}">}</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src=")">)</trans> <trans data-src="export default request">export default request</trans> <trans data-src="```">```</trans> <trans data-src="### 使用：">###Use:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import request from "./request"">import request from "./request"</trans> <trans data-src="rquest.get(`/v2/user`, {">rquest.get(`/v2/user`, {</trans> <trans data-src="catchHandler: true">catchHandler: true</trans> <trans data-src="})">})</trans> <trans data-src="```">```</trans> label: TypeScript , Axios