封装axios以优化网络请求的实践方法

资源摘要信息: "axios的封装" axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境中，它是一个非常流行的用于发送异步HTTP请求的库。封装axios通常指的是创建一个封装好的axios实例，这样做可以方便地为不同的API请求设置公共的配置和参数，提高代码的复用性和可维护性。 在封装axios时，通常会考虑到以下几个方面： 1. 创建axios实例：通过创建一个axios实例，可以对所有请求进行统一的配置，例如baseURL、timeout、headers等。 2. 请求拦截器：可以在请求发送前对请求进行拦截，进行统一处理，比如添加token、处理请求头等。 3. 响应拦截器：可以在响应返回时对响应进行拦截，进行统一的错误处理或数据处理。 4. 错误处理：封装中可以统一处理请求失败的情况，例如超时、状态码错误等，通常会配合Promise的reject进行处理。 5. API模块化：为了方便管理和维护，可以将不同的API请求封装成不同的模块。 6. 接口类型定义：使用TypeScript时，可以定义接口类型，这样可以更好地利用TypeScript的类型推断，减少代码中的错误。 7. 代码复用：封装好的axios实例可以被多个项目或模块复用，减少重复代码。 8. 环境变量：在不同的开发环境下，如开发环境、测试环境、生产环境，可能会有不同的配置，如API端点，可以在封装时根据环境变量来配置。 9. 并发请求处理：在封装axios时，也可以考虑对并发请求进行管理，例如取消重复的请求或者在请求间设置优先级。 10. 配置中心：封装后的axios实例通常会设计成可配置的，方便在不同环境下调整请求参数或行为。 以下是一个简单的axios封装示例，仅供参考： ```javascript import axios from 'axios'; import { message } from 'antd'; // 创建axios实例 const service = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, // api的base_url timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在这里可以添加token等 // config.headers['Authorization'] = 'Bearer your-token'; return config; }, error => { // 请求错误处理 console.error('Request Error:', error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { const res = response.data; // 根据res的状态码进行不同的操作 if (res.code !== 200) { message.error(res.message); // 如果是20001代表未登录状态，需要跳转登录页面 return Promise.reject('error'); } else { return res; } }, error => { console.error('Response Error:', error); message.error('服务器繁忙，请稍后再试！'); return Promise.reject(error); } ); export default service; ``` 在这个封装示例中，创建了一个axios实例，并为请求和响应设置了拦截器。通过拦截器可以在请求发送前添加认证信息（如token），并在响应返回后进行错误处理。这只是一个基础的封装，实际应用中可以根据需要添加更多的功能和配置。