Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它的特点包括支持浏览器和 Node.js、支持 Promise API、自动转换 JSON 数据、拦截请求和响应等。下面从入门到进阶，介绍 Axios 的使用方法：
入门
1. **安装 Axios：** 可以使用 npm 安装 Axios：
```bash npm install axios ```
2. **发起 GET 请求：**
```javascript const axios = require('axios'); // 发起 GET 请求 axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ```
进阶
1. **发起 POST 请求：**
```javascript // 发起 POST 请求 axios.post('https://api.example.com/data', { name: 'John Doe', age: 30 }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ```
2. **使用 async/await：**
```javascript async function fetchData() { try { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } catch (error) { console.error(error); } } fetchData(); ```
3. **拦截器（Interceptors）：** 可以在请求或响应被 then 或 catch 处理之前拦截它们。
```javascript // 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); }); ```
4. **取消请求：** 可以使用 CancelToken 取消请求。
```javascript const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('https://api.example.com/data', { cancelToken: source.token }) .then(response => { console.log(response.data); }) .catch(error => { if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { console.error(error); } }); // 取消请求 source.cancel('Operation canceled by the user.'); ```
5. **自定义实例：** 可以创建一个自定义的 Axios 实例来设置默认配置。
```javascript const instance = axios.create({ baseURL: 'https://api.example.com/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); instance.get('data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ```
通过以上入门到进阶的介绍，我们可以初步了解如何使用 Axios 发起 HTTP 请求，并掌握一些高级用法。继续实践和探索，可以帮助我们更好地应用 Axios 来处理网络请求。
除了基本的 GET 和 POST 请求外，Axios 还支持许多其他功能和用法，以下是一些额外的补充：
1. **设置默认配置：** 可以使用 `axios.defaults` 对象设置默认配置，这样在发起请求时不必重复指定相同的配置参数。
```javascript axios.defaults.baseURL = 'https://api.example.com/'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/json'; ```
2. **并发请求：** 使用 `axios.all` 和 `axios.spread` 可以处理并发请求和处理多个响应。
```javascript axios.all([ axios.get('/user/12345'), axios.get('/user/54321') ]) .then(axios.spread((user1, user2) => { console.log('User 1', user1.data); console.log('User 2', user2.data); })); ```
3. **实例方法：** 除了使用默认的全局 Axios 实例外，还可以创建多个自定义实例来分别处理不同的请求。
```javascript const instance1 = axios.create({ baseURL: 'https://api.example.com/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); const instance2 = axios.create({ baseURL: 'https://api.example.com/', timeout: 2000, headers: {'X-Custom-Header': 'baz'} }); ```
4. **请求和响应转换：** 可以通过自定义函数对请求和响应进行转换，例如对请求数据进行格式化或对响应数据进行解析。
```javascript axios.interceptors.request.use(request => { // 修改请求数据 return request; }, error => { return Promise.reject(error); }); axios.interceptors.response.use(response => { // 修改响应数据 return response; }, error => { return Promise.reject(error); }); ```
5. **错误处理：** 可以全局捕获所有请求的错误，并统一处理。
```javascript axios.interceptors.response.use(response => { return response; }, error => { // 统一处理错误 return Promise.reject(error); }); ```
6. **取消重复请求：** 可以使用 Axios CancelToken 来取消重复的请求。
```javascript const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/data', { cancelToken: source.token }).catch(thrown => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); // 取消请求 source.cancel('Operation canceled by the user.'); ```
通过这些额外的补充，我们可以更好地利用 Axios 的功能和特性来处理各种复杂的请求场景，并更好地应用于实际项目中。
