设置 Axios 拦截器 (React.js + TypeScript)

调试对于解决问题非常有用

当你在 Web 应用上调试代码时，浏览器上有很多开发者工具可以帮助你查找错误并最终了解发生了什么。（虽然有时你更喜欢忽略所有这些功能，只使用console.log（“它成功了！”） ……是的，我了解你）。

作为一名开发人员，我明白开发人员工具有时会对一些简单的问题有点不知所措，这些问题实际上并不需要在我编写的每一行上设置断点。

	const axios = require('axios')

	const doRequest = () => {
	try {
	return axios.get('https://thegreatapi.org/v1')
	} catch (error) {
	console.error(error)
	}
	}

	const callAPI = async () => {
	const response = doRequest()
	.then(response => {
	console.log(response);
	console.log("It works!");
	})
	.catch(error => {
	console.log(error)
	});
	}

	const axios = require('axios')

	const doRequest = () => {
	try {
	return axios.get('https://thegreatapi.org/v1')
	} catch (error) {
	console.error(error)
	}
	}

	const callAPI = async () => {
	const response = doRequest()
	.then(response => {
	console.log(response);
	console.log("It works!");
	})
	.catch(error => {
	console.log(error)
	});
	}

当我开发应用程序处理 HTTP 请求时，我总是在程序结束时执行console.log()来查看接收到的内容，因为设置断点有时会比较繁琐，但这个方法很好，在这种情况下也很有帮助。问题是在调试代码时，每次我想查看信息时都需要写这行代码，这不太好。我这样做浪费了我的时间。

我使用 Axios 来处理 HTTP 请求。Axios 提供了一种向 Axios 实例添加拦截器的方法。拦截器本质上是一个回调函数，会在请求之前或响应之后执行。一个基本的拦截器示例 [1] 如下：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});

想法是在这里添加log()（或者你想要的debug()、info()、warn()）。这将有助于避免在我们执行的每个特定请求或响应中都添加这些行。

在这个例子中，我使用了 React + TypeScript (显然还有ES6 )，但如果没有这个配置和简单的 JavaScript，效果应该也类似。

Interceptors.ts
在这个文件中，我创建了用于处理请求、请求错误、响应和响应错误等情况的函数。我导出了一个函数，用于将这些回调应用于给定的 Axios 实例，以实现可复用性。

	import {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";

	const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
	console.info(`[request] [${JSON.stringify(config)}]`);
	return config;
	}

	const onRequestError = (error: AxiosError): Promise<AxiosError> => {
	console.error(`[request error] [${JSON.stringify(error)}]`);
	return Promise.reject(error);
	}

	const onResponse = (response: AxiosResponse): AxiosResponse => {
	console.info(`[response] [${JSON.stringify(response)}]`);
	return response;
	}

	const onResponseError = (error: AxiosError): Promise<AxiosError> => {
	console.error(`[response error] [${JSON.stringify(error)}]`);
	return Promise.reject(error);
	}

	export function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
	axiosInstance.interceptors.request.use(onRequest, onRequestError);
	axiosInstance.interceptors.response.use(onResponse, onResponseError);
	return axiosInstance;
	}

	import {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";

	const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
	console.info(`[request] [${JSON.stringify(config)}]`);
	return config;
	}

	const onRequestError = (error: AxiosError): Promise<AxiosError> => {
	console.error(`[request error] [${JSON.stringify(error)}]`);
	return Promise.reject(error);
	}

	const onResponse = (response: AxiosResponse): AxiosResponse => {
	console.info(`[response] [${JSON.stringify(response)}]`);
	return response;
	}

	const onResponseError = (error: AxiosError): Promise<AxiosError> => {
	console.error(`[response error] [${JSON.stringify(error)}]`);
	return Promise.reject(error);
	}

	export function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
	axiosInstance.interceptors.request.use(onRequest, onRequestError);
	axiosInstance.interceptors.response.use(onResponse, onResponseError);
	return axiosInstance;
	}

拦截器配置完成后，我们就可以使用setupInterceptorsTo()函数了。在本例中，我将拦截器设置为全局的 axios 实例。这样，每次我获取 axios export default 时，拦截器都应该能够正常工作！

	import {setupInterceptorsTo} from "./Interceptors";
	import axios from "axios";
	setupInterceptorsTo(axios);

	import {setupInterceptorsTo} from "./Interceptors";
	import axios from "axios";
	setupInterceptorsTo(axios);

如果您不想将拦截器设置到全局实例，实际上您可以为您的应用程序上的特定用途创建一个 axios 实例。

	import {setupInterceptorsTo} from "./Interceptors";
	import axios from "axios";
	const specificAxios = setupInterceptorsTo(axios.createInstance());

	import {setupInterceptorsTo} from "./Interceptors";
	import axios from "axios";
	const specificAxios = setupInterceptorsTo(axios.createInstance());

另外，您可以添加额外的配置来启用和禁用日志。如果您不想在控制台上看到这些信息，可以添加一个标志或类似的配置。

资源。