axios的二次封装

淡淡的烟草味﹌ 2023-10-09 19:38 33阅读 0赞

**目录**

一、axios是什么？

二、axios有哪些特性

三、在Vue中如何封装axios

四、为什么要进行封装

--------------------

## 一、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

![3b9185295f624c98882ac9b78a6f9019.png][]

**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

![ca1c822cd6094d72b38d1b0b470641c8.png][]

**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文件，发送数据请求**

最终请求到的数据如下

![9f4ac12ca2d14e74b182b242a9eb92a3.png][]

## 四、为什么要进行封装 ##

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

> 不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍
> 
> 这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用

[3b9185295f624c98882ac9b78a6f9019.png]: https://img-blog.csdnimg.cn/3b9185295f624c98882ac9b78a6f9019.png
[ca1c822cd6094d72b38d1b0b470641c8.png]: https://img-blog.csdnimg.cn/ca1c822cd6094d72b38d1b0b470641c8.png
[9f4ac12ca2d14e74b182b242a9eb92a3.png]: https://img-blog.csdnimg.cn/9f4ac12ca2d14e74b182b242a9eb92a3.png