axios得使用和封装

<think>好的，用户想了解Axios的使用方法以及如何进行封装。首先，我需要回忆Axios的基本概念和常用功能。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js，支持请求拦截、响应拦截、自动转换JSON数据等特性。用户可能希望了解如何安装、基本使用，以及如何封装以提升代码复用性。 接下来，我应该整理安装步骤。Axios可以通过npm或yarn安装，用户可能需要示例代码来展示如何引入和使用。然后，基本使用部分需要涵盖GET、POST请求，以及处理响应和错误的方式。这部分需要简明扼要，避免信息过载。 然后是封装部分。用户可能希望在自己的项目中统一处理请求，比如添加拦截器来处理全局的loading状态、错误提示、token验证等。需要分步骤说明如何创建实例、添加拦截器，并提供一个封装后的示例，方便用户直接使用。同时，引用提供的参考资料中的示例，如request.ts的二次封装，以及如何在Vue或React项目中引入封装后的实例。 还需要考虑文件上传的封装，这可能是一个常见的需求，用户提到的引用4中提到了上传文件的封装，应该包含这部分内容。此外，用户可能对如何结合SignalR感兴趣，但根据引用5，可能只需要简要提及，或者专注于核心的Axios封装。 要确保回答结构清晰，分步骤讲解，每个部分都有代码示例。同时，检查是否有遗漏的细节，比如错误处理中的具体状态码处理，或者如何取消请求等高级功能，但根据用户问题，可能不需要深入这些细节，保持基础即可。 最后，生成相关问题，需要围绕Axios的进阶使用、拦截器的具体应用、封装的最佳实践，以及与其他技术的整合，比如文件上传或WebSocket。确保问题覆盖用户可能进一步探索的方向。</think>### Axios使用教程及封装示例 #### 一、Axios基本使用 1. **安装Axios** ```bash npm install axios --save # 或使用 yarn add axios ``` 2. **发送请求示例** ```javascript // GET请求 axios.get('/api/user', { params: { id: 1 } }) .then(response => console.log(response.data)) .catch(error => console.error(error)); // POST请求 axios.post('/api/login', { username: 'admin', password: '123456' }) .then(response => console.log(response.data)); ``` 3. **全局配置** ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = 'Bearer token123'; ``` #### 二、Axios封装步骤（以Vue项目为例） 1. **创建封装文件`request.js`** ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 10000, }); // 请求拦截器 instance.interceptors.request.use(config => { config.headers.Authorization = localStorage.getItem('token'); return config; }, error => Promise.reject(error)); // 响应拦截器 instance.interceptors.response.use(response => { return response.data; // 直接返回核心数据 }, error => { if (error.response.status === 401) { alert('登录过期，请重新登录'); window.location.href = '/login'; } return Promise.reject(error); }); export default instance; ``` 2. **在组件中使用封装实例** ```javascript import request from './request.js'; // GET请求 request.get('/user', { params: { id: 1 } }); // POST请求 request.post('/login', { username: 'admin', password: '123456' }); ``` #### 三、文件上传封装示例 ```javascript export const uploadFile = (file) => { const formData = new FormData(); formData.append('file', file); return instance.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); }; ``` #### 四、最佳实践 1. 通过`axios.create()`创建不同业务域的独立实例[^3] 2. 拦截器中实现统一错误处理（如401跳转登录） 3. 封装文件上传等特殊请求类型[^4] 4. 支持TypeScript类型定义（引用示例中的`request.ts`）[^1]