axios封装

最新推荐文章于 2026-05-09 06:20:10 发布

转载最新推荐文章于 2026-05-09 06:20:10 发布 · 271 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/A535366/article/details/119946239

本文介绍了为何要封装axios库，主要原因是减少重复代码，提高代码质量和维护性。通过封装，可以统一处理请求配置、错误处理、环境判断以及设置请求头和超时时间。在开发和生产环境中，利用NODE_ENV环境变量来设定不同基地址，并通过代理解决跨域问题。此外，还展示了如何设置请求拦截器和响应拦截器，以及如何封装通用和特定的请求方法。封装后的axios使得API调用更加简洁，便于项目管理和维护。

1.为什么要封装axios?封装axios

如果每发起⼀次 HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据
项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍
这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下 axios 再使⽤
axios是单立模式因为每一次请求都需要用到这个axios
首先安装axios-S到生产环境里，
为什么要安装到生产环境里，
因为安装到生产环境里开发环境也可以使用但是生产环境里面开发环境不可以使用，最后在min.js中导入
举个简单个栗子：

axios ( 'http://localhost:3000/data' , {
// 配置代码
                method : 'GET' ,
                 timeout : 1000 ,
                withCredentials : true ,
                headers : {
                'Content-Type' : 'application/json' ,
                 Authorization : 'xxx' ,
                },
                transformRequest : [ function ( data , headers ) {
                        return data ;
        }],
                // 其他请求配置...
                })
                        . then (( data ) => {
                // todo: 真正业务逻辑代码
                                console . log ( data );
                                }, ( err ) => {
                        // 错误处理代码
                if ( err . response . status === 401 ) {
                // handle authorization error
        }
                if ( err . response . status === 403 ) {
                // handle server forbidden error
}
                // 其他错误处理.....
                console . log ( err );
        });

如果每个⻚⾯都发送类似的请求，都要写⼀堆的配置与错误处理，就显得过于繁琐了

这时候我们就需要对 axios 进⾏⼆次封装，让使⽤更为便利

⼀、如何封装

封装的同时，你需要和后端协商好⼀些约定，请求头，状态码，请求超时时间 .......
设置接⼝请求前缀：根据开发、测试、⽣产环境的不同，前缀需要加以区分
请求头 : 来实现⼀些具体的业务，必须携带⼀些参数才可以请求 ( 例如：会员业务 )
状态码 : 根据接⼝返回的不同 status ，来执⾏不同的业务，这块需要和后端约定好
请求⽅法：根据 get 、 post 等⽅法进⾏⼀个再次封装，使⽤起来更为⽅便
请求拦截器 : 根据请求的请求头设定，来决定哪些请求可以访问
响应拦截器：这块就是根据后端 ` 返回来的状态码判定执⾏不同业务
设置接⼝请求前缀
利⽤ node 环境变量来作判断，⽤来区分开发、测试、⽣产环境
在本地调试的时候，还需要在 vue.config.js ⽂件中配置 devServer 实现代理转发，从⽽实现跨域
设置请求头与超时时间
⼤部分情况下，请求头都是固定的，只有少部分情况下，会需要⼀些特殊的请求头，这⾥将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传⼊，覆盖基础配置

if ( process . env . NODE_ENV === 'development' ) {
axios . defaults . baseURL = 'http://dev.xxx.com'
} else if ( process . env . NODE_ENV === 'production' ) {
axios . defaults . baseURL = 'http://prod.xxx.com'
}
devServer : {
        proxy : {
                '/proxyApi' : {
                        target : 'http://dev.xxx.com' ,
                        changeOrigin : true ,
                        pathRewrite : { '/proxyApi' : ''
                                }
                        }
                       }
                     }

设置请求头与超时时间

⼤部分情况下，请求头都是固定的，只有少部分情况下，会需要⼀些特殊的请求头，这⾥将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传⼊，覆盖基础配置

const service = axios . create ({
...
timeout : 30000 , // 请求 30s 超时
headers : {
get : {'Content-Type' : 'application/x-www-form-urlencoded;charset=utf- 8'
// 在开发中，⼀般还需要单点登录或者其他功能的通⽤请求头，可以⼀并配置进来
},
post : {
'Content-Type' : 'application/json;charset=utf-8'
// 在开发中，⼀般还需要单点登录或者其他功能的通⽤请求头，可以⼀并配置进来
}
},
})

封装请求方法

先引⼊封装好的⽅法，在要调⽤的接⼝重新封装成⼀个⽅法暴露出去

把封装的⽅法放在⼀个 api.js ⽂件中

⻚⾯中就能直接调⽤

// .vue
import { getorglist } from '@/assets/js/api'
        getorglist ({ id : 200 }). then ( res => {
                console . log ( res )
        })

这样可以把 api 统⼀管理起来，以后维护修改只需要在 api.js ⽂件操作即可

请求拦截器

请求拦截器可以在每个请求⾥加上 token ，做了统⼀处理后维护起来也⽅便