Axios最佳实战：前端HTTP通信的王者之选
在现代Web开发中，前后端数据交互已经成为了一项基础且至关重要的技能。而在众多可选的HTTP通信库中，Axios凭借其强大的功能、灵活的配置以及良好的用户体验，已经逐渐成为了前端开发者们的首选。本篇博客将围绕Axios的最佳实践进行深入探讨，帮助你更好地掌握这个强大的库，提升你的开发效率。
1. 揭开Axios的神秘面纱
1.1 Axios是何方神圣？
Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js中。它提供了一个简洁的API来处理XMLHttpRequests和HTTP请求。Axios相比于其他HTTP库的优势在于其支持Promise API、能拦截请求和响应、转换请求和响应数据、取消请求等，同时还提供了客户端支持防止CSRF等安全特性。
1.2 Axios的核心特性
Axios的核心特性包括：
- 基于Promise的链式调用，支持async/await语法；
- 拦截请求和响应，方便进行统一处理；
- 转换请求和响应数据，轻松实现数据格式的转换；
- 支持取消请求，提高用户体验；
- 客户端支持防止CSRF等安全特性；
- 提供了API用于处理并发请求。
2. 快速上手Axios
2.1 安装Axios
使用npm或yarn等包管理工具可以轻松安装Axios：
npm install axios # or yarn add axios
2.2 配置Axios
在安装完Axios后，我们可以通过全局默认设置或创建实例来配置Axios。全局默认设置适用于大部分请求，而创建实例则允许我们对特定请求进行更精细的配置。
// 设置全局默认配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; // 创建实例并配置 const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, headers: {'X-Custom-Header': 'foobar'} });
3. Axios基础使用指南
3.1 轻松发起GET请求
使用Axios发起GET请求非常简单，只需调用axios.get方法并传入URL即可：
axios.get('/user?ID=12345') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
3.2 发送POST请求
发送POST请求同样简单，可以使用axios.post方法，并传入URL和需要发送的数据：
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
3.3 探索其他HTTP方法
除了GET和POST，Axios还支持PUT、DELETE等其他HTTP方法，使用方法类似：
axios.put('/user/12345', { firstName: 'NewName' }) .then(function (response) { console.log(response.data); }); axios.delete('/user/12345') .then(function (response) { console.log(response.data); });
4. 深入挖掘Axios的高级特性
4.1 请求与响应的拦截器
Axios提供了请求拦截器和响应拦截器，允许我们在请求发送前或响应返回后进行预处理：
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
4.2 取消不必要的请求
在某些场景下，我们可能需要取消正在进行的请求，Axios提供了CancelToken来实现这一功能：
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); // 取消请求（请求原因是可选的） source.cancel('Operation canceled by the user.');
4.3 错误处理的艺术
在Axios中，我们可以使用.catch方法来捕获请求过程中发生的错误，并进行相应的处理：
axios.get('/user/12345') .catch(function (error) { if (error.response) { // 请求已发出，但服务器响应的状态码不在 2xx 范围内 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 请求已发出，但没有收到响应 console.log(error.request); } else { // 发送请求时发生了其他错误 console.log('Error', error.message); } console.log(error.config); });
4.4 并发请求的处理
当我们需要同时发起多个请求，并等待所有请求都完成时，可以使用axios.all方法：
axios.all([ axios.get('/user/12345'), axios.get('/user/67890') ]) .then(axios.spread(function (user12345, user67890) { // 两个请求现在都完成了 }));
5. Axios与Vue.js的完美结合
5.1 在Vue.js中使用Axios
在Vue.js项目中使用Axios非常简单，只需在项目中安装Axios，然后在需要的地方引入并使用即可。通常，我们会将Axios实例挂载到Vue的原型上，这样在任何组件中都可以通过this.axios来访问Axios实例：
import axios from 'axios'; Vue.prototype.$axios = axios; // 在Vue组件中发起请求 this.$axios.get('/user/12345') .then(response => { console.log(response.data); });
5.2 响应式数据与视图更新
结合Vue.js的响应式特性，我们可以轻松地将Axios获取的数据与视图绑定，实现数据的自动更新：
export default { data() { return { userInfo: null }; }, mounted() { this.$axios.get('/user/12345') .then(response => { this.userInfo = response.data; }); } };
在模板中，我们可以直接使用userInfo来渲染数据：
<template> <div> <h1>{{ userInfo.name }}</h1> <p>{{ userInfo.email }}</p> </div> </template>
5.3 活用策略模式封装axios请求，拦截器等
- 简单封装axios发送get，post，put等各种请求，让请求体验保持一致。
本质上除了get请求，其他请求都是post请求，所以单独处理下get请求，其他请求跟axios保持一致就可以：
import axios from "axios"; import { ElMessage } from 'element-plus' //配置默认值 axios.defaults.baseURL = 'http://172.16.3.37:7001/api'; axios.defaults.timeout = 7000; const request = { //创建一个用来发请求工厂 /** * 一次请求 * @param url 请求地址 * @param type method * @param data 参数 get请求时必须是 plain object * @returns {Promise<unknown>} */ one({url, type = 'get', data = {}}) { return new Promise((resolve, reject) => { if (type.toLowerCase() == "get") { axios.get(url, {params: data}).then(res => { resolve(res.data) }).catch(e => { ElMessage.error('操作失败') reject(e) }) } else { axios[type.toLowerCase()](url, {data: data}).then(res => { resolve(res.data) }).catch(e => { ElMessage.error('操作失败') reject(e) }) } }) }, /** * 循环请求完成后执行某项操作 * @param arr 数组 * @returns {Promise<unknown>} */ multiple(arr) { let parr = []; arr.forEach(async item => { parr.push(await this.one(item)) }) return new Promise((resolve, reject) => { Promise.all(parr).then(res => { resolve(res) }).catch(e => { reject(e) }) }) } } export default request
- axios拦截器
/** * 可执行的策略 * @type {{HEADER: (function(*): *)}} */ const strategyMap = { 'HEADER': (config) => { let configTemp = config // 给请求头加些什么 if (true) { configTemp.headers = { 'X-API-ACCOUNT-KEY': 'KEY', 'Authorization': 'AUTHORIZATION', } } return configTemp }, } /** * 执行config策略 * @param config * @param {[string]} strategies * @returns {*} config */ import {merge} from "lodash-es" export const executeStrategies = (config, strategies) => { let configTemp = config // 请求拦截器是对config做进一步处理 // 合并所有 for (let i = 0; i < strategies.length; i++) { if (strategyMap[strategies[i]]) { configTemp = merge(configTemp, strategyMap[strategies[i]](config)) } } return configTemp } export const requestInterceptor = { onFulfilled: function (config) { // 在发送请求之前做些什么 // 执行HEADER策略 return executeStrategies(config, ['HEADER',]); }, onRejected: function (err) { // 对请求错误做些什么 return Promise.reject(err); } } // 使用拦截器 axios.interceptors.request.use(requestInterceptor.onFulfilled, requestInterceptor.onRejected)
6. 守护Axios的安全与性能
6.1 安全性考虑
在使用Axios时，我们需要注意一些安全性问题，如防止CSRF攻击。幸运的是，Axios库已经为我们考虑了这些问题，并提供了相应的解决方案。默认情况下，Axios会自动携带同源cookie，如果需要跨域携带cookie，我们需要设置withCredentials为true：
axios.defaults.withCredentials = true;
同时，我们还需要在服务器端进行相应的配置，允许跨域携带cookie。
6.2 性能优化建议
为了提升Axios的性能，我们可以考虑以下建议：
- 合理设置请求的超时时间，避免长时间等待；
- 根据实际需求选择合适的数据传输格式，如JSON、FormData等；
- 利用HTTP/2的多路复用和头部压缩等特性来提升性能；
- 对返回的数据进行缓存处理，避免重复请求；
- 使用CDN加速静态资源的加载。
