Loading... ### Axios中的那些代码 #### 一、Axios简介 Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它能够用于执行HTTP请求,支持拦截请求和响应、取消请求、自动转换JSON数据等功能。其强大的功能和简洁的API设计,使得Axios成为前端开发中广泛使用的HTTP客户端。 ![](https://www.8kiz.cn/usr/uploads/2024/07/250827427.png) #### 二、基本使用 ##### 1. 安装Axios 在项目中使用Axios前,需要先进行安装。可以使用npm或yarn进行安装: ```bash npm install axios # 或者 yarn add axios ``` ##### 2. 发送GET请求 发送GET请求是Axios最常见的用法之一。以下是一个简单的示例: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error('Error fetching data:', error); }); ``` ##### 3. 发送POST请求 Axios也可以用于发送POST请求,并且可以发送复杂的数据结构: ```javascript import axios from 'axios'; axios.post('https://api.example.com/data', { name: 'John Doe', age: 30 }) .then(response => { console.log(response.data); }) .catch(error => { console.error('Error posting data:', error); }); ``` #### 三、请求与响应拦截器 拦截器允许在请求或响应被 `then`或 `catch`处理前拦截它们。这在处理统一的错误响应、添加请求头等场景中非常有用。 ##### 1. 添加请求拦截器 请求拦截器可以在请求发出前对其进行修改: ```javascript axios.interceptors.request.use(config => { // 在发送请求之前做些什么 config.headers.Authorization = 'Bearer token'; return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); ``` ##### 2. 添加响应拦截器 响应拦截器可以在响应数据到达之前对其进行处理: ```javascript axios.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 对响应错误做些什么 if (error.response.status === 401) { // 处理401错误 console.error('Unauthorized, redirect to login'); } return Promise.reject(error); }); ``` #### 四、取消请求 使用Axios,可以在请求进行中取消请求。可以通过 `CancelToken`来实现这一点: ```javascript import axios from 'axios'; const CancelToken = axios.CancelToken; let cancel; axios.get('https://api.example.com/data', { cancelToken: new CancelToken(function executor(c) { cancel = c; }) }).catch(thrown => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); // 取消请求 cancel('Operation canceled by the user.'); ``` #### 五、处理并发请求 Axios提供了 `axios.all`和 `axios.spread`来处理并发请求: ```javascript import axios from 'axios'; function getUser() { return axios.get('https://api.example.com/user'); } function getAccount() { return axios.get('https://api.example.com/account'); } axios.all([getUser(), getAccount()]) .then(axios.spread((userResponse, accountResponse) => { console.log('User:', userResponse.data); console.log('Account:', accountResponse.data); })); ``` ### 思维导图 ```plaintext +------------------------------------------------------+ | Axios中的那些代码 | +------------------------------------------------------+ | +-----------------------------+ | 一、Axios简介 | +-----------------------------+ | +-----------------------------+ | 二、基本使用 | | 1. 安装Axios | | 2. 发送GET请求 | | 3. 发送POST请求 | +-----------------------------+ | +-----------------------------+ | 三、请求与响应拦截器 | | 1. 添加请求拦截器 | | 2. 添加响应拦截器 | +-----------------------------+ | +-----------------------------+ | 四、取消请求 | +-----------------------------+ | +-----------------------------+ | 五、处理并发请求 | +-----------------------------+ ``` ### 总结 Axios为HTTP请求提供了一个强大的工具集,使得前端开发中与服务器通信变得更加简单和高效。通过掌握Axios的基础用法、拦截器、取消请求以及处理并发请求等高级功能,开发者可以大大提升开发效率和代码质量。希望本文能够帮助你更好地理解和使用Axios。 最后修改:2024 年 07 月 23 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏