React 封装 Axios 请求并设置自定义拦截器 - 2023 年简易示例

// 引入 React 和 axios import React from 'react'; import axios from 'axios';

// 创建一个自定义的请求拦截器 axios.interceptors.request.use( config => { // 在请求发送之前做一些处理，比如添加 token 等 config.headers.Authorization = Bearer ${localStorage.getItem('token')}; return config; }, error => { // 处理请求错误 return Promise.reject(error); } );

// 创建一个自定义的响应拦截器 axios.interceptors.response.use( response => { // 在响应返回之前做一些处理，比如处理错误信息等 return response; }, error => { // 处理响应错误 return Promise.reject(error); } );

// 创建一个封装了 axios 请求的函数 const fetchAPI = (url, method, data) => { return new Promise((resolve, reject) => { axios({ url, method, data }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); };

// 在组件中使用封装的请求函数 const ExampleComponent = () => { const handleClick = () => { fetchAPI('/api/data', 'GET') .then(data => { console.log(data); }) .catch(error => { console.error(error); }); };

return (

// 在这个示例中，我们首先引入了 React 和 axios 库。然后，我们创建了一个自定义的请求拦截器和响应拦截器，用于在每个请求和响应上添加自定义逻辑。接下来，我们创建了一个 fetchAPI 函数，它使用 Promise 封装了 axios 请求，并返回一个 Promise 对象。最后，我们在组件中使用了封装的请求函数。

// 在组件中，我们定义了一个 handleClick 函数，在点击按钮时调用 fetchAPI 函数发送 GET 请求。在 then 方法中，我们可以处理请求成功的数据，catch 方法中可以处理请求失败的情况。

// 请注意，这只是一个简化的示例，实际项目中可能需要更多的错误处理和其他逻辑。