一、axios是什么？
axios 是一个轻量的 HTTP客户端
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
二、axios有哪些特性
(1).从浏览器中创建 XMLHttpRequests
(2).从 node.js 创建 http请求
(3).支持 Promise API
(4).拦截请求和响应
(5).转换请求数据和响应数据
(6).取消请求
(7).自动转换JSON 数据
(8).客户端支持防御XSRF
三、在Vue中如何封装axios
1.在vue项目中安装axios
npm i axios
2.新建axios.js文件，导入axios，对axios进行二次封装，分别对请求拦截器和响应拦截器进行二次封装,封装后每次都会监测当前localStorage是否有token,如果有token，则在请求头中携带token发送请求。
import axios from 'axios' import { toast } from '~/composables/util' import { getToken } from '~/composables/auth' import store from '~/store' const service = axios.create({ // 设置的基础路径(根路径)，每次发送请求只需要写根路径后面的路径即可，会自动添加根路径 baseURL: '/api' }) // 添加请求拦截器 service.interceptors.request.use( function (config) { // 往header头自动添加token const token = getToken() if (token) { config.headers['token'] = token } return config }, function (error) { // 对请求错误做些什么 return Promise.reject(error) } ) // 添加响应拦截器 service.interceptors.response.use( function (response) { // 对响应数据做点什么 return response.data.data }, function (error) { // 对响应错误做点什么 const msg = error.response.data.msg || '请求失败' // token已经失效，依然进行操作， if (msg == '非法token，请先登录！') { store.dispatch('logout').then((res) => { location.reload() }) } toast(error.response.data.msg || '请求失败', 'error') return Promise.reject(error) } ) export default service
3.在vite.config.js文件中配置代理,解决跨域问题
相当于配置 /api 就是 下面接口的访问路径 http://ceshi13.dishait.cn
server: { proxy: { '/api': { target: 'http://ceshi13.dishait.cn', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } },
4.在vue文件中直接导入创建的axios文件，发送数据请求
<script setup> import axios from '~/axios.js' axios.get('/admin/statistics1').then(res => { console.log(res); }) </script>
最终请求到的数据如下
四、为什么要进行封装
axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。
不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍
这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用
