vue3.0axios封装,vue-axios使用
本文主要介绍了在Vue项目中封装axios的方法。axios是一个轻量级的HTTP客户端，它基于XMLHttpRequest服务执行HTTP请求。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
:
目录
1.axios的哪些功能基本都用2。为什么要封装3。如何封装和设置接口请求前缀设置请求头和超时封装请求方法请求拦截器响应拦截器摘要参考
一、axios是什么
Axios是一个轻量级的HTTP客户端。
基于XMLHttpRequest服务执行HTTP请求，支持丰富的配置、Promise、browser、Node.js自从Vue2.0，犹大宣布取消vue-resource官方推荐，转而推荐axios之后，Axios已经成为大多数Vue开发者的首选。
特性
从浏览器创建XMLHttpRequests，从node.js创建http请求，支持Promise API拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换JSON数据，支持XSRF防御。
基本使用
固定
//安装在项目中
npm安装axios - S
//cdn简介
script src= https://UNP kg . com/axios/dist/axios . min . js /script
引入
从“axios”导入axios
即时战略游戏
axios({
Url:xxx ，//设置请求的地址。
方法： GET ，//设置请求方法
Params:{ //get请求使用Params作为参数。如果是post请求，请使用数据。
类型： ，
第1页
}
}).然后(res={
//res是后端返回的数据。
console . log(RES)；
})
并发请求axios.all([])
函数getUserAccount() {
返回axios . get(/user/12345 )；
}
函数getUserPermissions() {
返回axios . get(/user/12345/permissions )；
}
axios.all([getUserAccount()，getUserPermissions()])。然后(axios.spread(function (res1，res2) {
//第一个请求返回的res1内容，第二个请求返回的res2内容
//两个请求在完成之前都不会执行。
}));
二、为什么要封装
Axios的API是友好的，你可以很容易地直接在项目中使用它。
但是随着项目规模的增大，如果每一个HTTP请求都被发起，就需要编写这些操作，比如设置超时、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等。
这种重复的工作不仅浪费时间，而且代码冗余，难以维护。为了提高我们代码的质量，在使用axios之前，我们应该在项目中对它进行两次打包。
例如：
axios( http://localhost:3000/data ，{
//配置代码
方法：“GET”，
超时：1000，
withCredentials: true，
标题：{
“内容类型”:“应用程序/json”，
授权： xxx ，
},
transform request:[function(data，headers) {
返回数据；
}],
//其他请求配置.
})。然后((数据)={
//todo:真实的业务逻辑代码
console.log(数据)；
}，(err)={
//错误处理代码
if (err.response.status===401) {
//处理授权错误
}
if (err.response.status===403) {
//处理服务器禁止的错误
}
//其他错误处理.
console . log(err)；
});
如果每个页面都发送类似的请求，那么写一堆配置和错误处理就太繁琐了。
这时候我们需要对axios进行第二次打包，让它使用起来更加方便。
三、如何封装
在封装的同时，你需要和后端协商一些协议，比如请求头，状态码，请求超时。
设置接口请求前缀：前缀需要根据不同的开发、测试和生产环境进行区分。
请求头：要实现一些特定的业务，必须携带一些参数才能请求(比如会员业务)。
状态码：根据接口返回的不同状态，执行不同的服务，需要和后端商定。
方法：按照get、post等方法重新打包，使用起来更方便。
请求拦截器：根据请求的请求头设置确定哪些请求可以被访问。
响应拦截器：这个模块根据后端返回的状态码来决定不同服务的执行
设置接口请求前缀
使用节点环境变量进行判断，用于区分开发、测试和生产环境。
if(process . ENV . node _ ENV=== development ){
axios . defaults . base URL= http://dev . XXX . com
} else if(process . ENV . node _ ENV=== production ){
axios . defaults . base URL= http://prod . XXX . com
}
在本地调试时，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域。
devServer: {
代理服务器：{
/proxyApi: {
目标： http://dev.xxx.com ，
changeOrigin:真的，
路径重写：{
/proxyApi :
}
}
}
}
设置请求头与超时时间
在大多数情况下，请求头是固定的，但在少数情况下，需要一些特殊的请求头。这里，通用请求头被用作基本配置。当需要一个特殊的请求头时，这个特殊的请求头作为一个参数被传入，包括基本的配置。
const service=axios.create({
.
超时：30000，//请求超时30秒
标题：{
获取：{
content-Type“:”application/x-www-form-urlencoded；charset=utf-8
//开发中一般需要带单点登录或其他功能的通用请求头，可以一起配置。
},
帖子：{
Content-Type“:”应用程序/JSON；charset=utf-8
//开发中一般需要带单点登录或其他功能的通用请求头，可以一起配置。
}
},
})
封装请求方法
首先引入封装的方法，然后把要调用的接口重新封装成一个方法并公开。
//获取请求
导出函数httpGet({
url，
params={}
}) {
返回新承诺((解决，拒绝)={
axios.get(url，{
参数
}).然后((res)={
解析(结果数据)
}).catch(错误={
拒绝(错误)
})
})
}
//发布
//发布请求
导出函数httpPost({
url，
data={}，
params={}
}) {
返回新承诺((解决，拒绝)={
axios({
url，
方法： post ，
transform request:[函数(数据){
让ret=
对于(让它进入数据){
ret=encodeURIComponent(it)= encodeURIComponent(data[it])
}
返回ret
}],
//发送的数据
数据，
//URL参数
参数
}).然后(res={
解析(结果数据)
})
})
}
将封装的方法放在api.js文件中。
从“”导入{ httpGet，httpPost }。/http
export const getorglist=(params={ })=http get({ URL: apps/API/org/list ，params })
页面可以直接调用。
//.某视频剪辑软件
从“@/assets/js/api”导入{ getorglist }
getorglist({ id: 200 })。然后(res={
console.log(res)
})
这样可以统一管理api，后期的维护和修改只需要在api.js文件中完成。
请求拦截器
请求拦截器可以给每个请求添加token，统一处理后便于维护。
//请求拦截器
axios.interceptors.request.use(
配置={
//每次发送请求前确定令牌是否存在。
//如果存在的话，令牌统一添加到http请求的头部，让后台根据令牌判断你的登录状态。这里，令牌通常在用户登录后存储在localstorage中。
token(config . headers . authorization=token)
返回配置
},
错误={
返回承诺。错误(错误)
})
响应拦截器
响应拦截器收到响应后可以做一层操作，比如判断登录状态，根据状态码授权。
//响应拦截器
axios . interceptors . response . use(response={
//如果返回的状态码是200，说明接口请求成功，可以正常获取数据。
//否则，抛出错误
if (response.status===200) {
if (response.data.code===511) {
//未授权调用授权接口
} else if(response . data . code===510){
//不登录跳转到登录页面
}否则{
返回承诺。解决(响应)
}
}否则{
退货承诺.拒绝(回应)
}
}，错误={
//这里可以统一处理异常状态。
if (error.response.status) {
//处理请求失败的情况
//相应地处理不同的返回代码对。
退货承诺.拒绝(错误.回应)
}
})
小结
封装是编程中非常有意义的手段。简单的axios封装就能让我们领略到它的魅力。封装axios没有绝对的标准。只要你的封装能够满足你的项目需求，并且易于使用，就是一个好的封装方案。
参考文献
Www.html.cn/qa/vue-js/2.juejin.cn/post/684490.juejin.cn/post/684490.就是这样。这篇关于在vue项目中打包axios的方法的文章在这里。有关在Vue中打包axios的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。