vue封装axios全局使用,vue项目封装api接口
在实际项目中，与后台的数据交互是必不可少的。我平时用的是axios库，所以下面这篇文章主要介绍vue打包axios和api的接口管理的相关信息，有需要的朋友可以参考一下。
:
目录
1.前言2。axios封装步骤3。api接口统一管理综述
一、前言
其实axios封装和统一管理api接口的主要目的是帮助我们简化代码，方便后期的更新和维护。
二、axios封装步骤
安装：npm安装axios -S
一般我会在项目的src目录下新建一个网络文件夹作为我们的网络请求模块，然后在里面新建一个http.js和api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口URL，request.js公开了我们放进去的api方法。
//在http.js中介绍axios
从“axios”导入axios；//介绍axios
从导入路由器./router ；
//vant的toast提示框组件，可以根据自己的ui组件进行更改。
从“vant”导入{ Toast }；
我们的项目环境可能包括开发环境、测试环境和生产环境。我们通过node的环境变量匹配默认的接口url前缀。Axios.defaults.baseURL可以设置Axios的默认请求地址，不多说了。
创建配置目录。
创建env . development . jsenv . production . jsenv . test . js的目录。
Env.development.js内容：
模块.导出={
baseurl: http://www . devele . com:4456 //开发环境使用的基url
}
设置请求超时
通过axios.defaults.timeout设置默认请求超时，比如10s后会通知用户当前请求超时，请刷新等。
//环境的切换
const {baseUrl}=require(./config/env。process . ENV . node _ ENV)；
//同时package.json的脚本需要指定测试环境的模式——模式测试。
脚本:{
serve: vue-cli-service serve ，
build : vue-CLI-服务版本，
测试: vue-CLI-服务构建模式测试，
lint : vue-CLI-服务lint
}
const service=axios.create({
baseURL: baseUrl，//url=基本api url请求URL
withCredentials: false，//跨域请求时发送cookies
超时：1000*12 //请求超时
})
发布请求标题的设置
在请求帖子的时候，我们需要添加一个请求头，所以我们可以在这里做一个默认的设置，就是将帖子的请求头设置为application/x-www-form-urlencoded；字符集=UTF-8
//设置post请求头
service . defaults . headers . post[ Content-Type ]= application/x-www-form-urlencoded ；
请求拦截
我们可以在发送请求之前拦截它。我们为什么要拦截它？我们用什么来拦截请求？例如，有些请求只有在用户登录后才能被访问，或者我们需要在发出post请求时序列化我们提交的数据。这时候我们就可以在请求发出之前拦截它，做到我们想做的事情。
//先导入vuex，因为我们要用里面的状态对象。
//vuex的路径是按照自己的路径写的。
从“@/store/index”导入商店；
//请求拦截器
service . interceptors . request . use(
配置={
//加载时不传递默认值
如果(！config.hideloading) {
//请求是是否开启加载。
Toast.loading({
禁止点击：真
})
}
//每次发送请求前，确定vuex中是否存在token。
//如果存在的话，令牌统一添加到http请求的头部，让后台根据令牌判断你的登录状态。
//即使令牌在本地存在，也有可能令牌过期，所以返回状态要在响应拦截器中判断。
if (store.state.token) {
config . headers . token=store . state . token；
//有些接口是config . headers . authorization=token
}
返回配置
},
错误={
//对请求错误做些什么
console.log(错误)//用于调试
退货承诺.拒绝(错误)
}
)
这里说一下token。通常，登录完成后，用户的令牌通过localStorage或cookie存储在本地。然后，用户每次进入页面(也就是main.js中)，都会先从本地存储中读取令牌。如果令牌存在，vuex中的令牌状态将被更新。然后，每次请求接口时，请求的头部都会携带令牌，后台工作人员可以根据携带的令牌判断你的登录是否过期。如果没有，说明你从来没有登录过。这时候可能会有朋友产生疑惑，就是每个请求都携带一个令牌，那么一个页面不需要用户登录就可以访问怎么办？其实你的前端请求可以携带token，但是后台可以选择不接收。
响应拦截
//响应拦截器
服务.拦截器.响应.使用(
响应={
//如果返回的状态码是200，说明接口请求成功，可以正常获取数据。
//否则，抛出错误
if (response.status===200) {
return Promise.resolve(响应)；
}否则{
return Promise.reject(响应)；
}
},
//服务器状态代码不是以2开头
//你可以在这里和你的后台开发者协商统一的错误状态码。
//然后根据返回的状态码做一些操作，比如登录到期提示，错误提示等等。
//下面是几个常见的操作，其他需求可以自行扩展。
错误={
if (error.response.status) {
开关(错误.响应.状态){
//401:未登录
//如果没有登录，跳转到登录页面，携带当前页面的路径。
//成功登录后返回当前页面。这一步需要在登录页面上完成。
案例401:
router.replace({
路径：“/login”，
查询：{
重定向：router . current out . full path
}
});
打破；
//403令牌过期
//当登录过期时提示用户
//清除本地令牌，清空vuex中的令牌对象
//跳转到登录页面
案例403:
吐司({
消息：“登录已过期，请再次登录”，
时长：1000，
禁止点击：真
});
//清除令牌
store.dispatch(FedLogOut )。然后(()={
//跳转到登录页面，传递要浏览页面的完整路径。成功登录后，跳转到需要访问的页面。
router.replace({
路径：“/login”，
查询：{
重定向：router . current out . full path
}
}) })
打破；
//404请求不存在
案例404:
吐司({
消息：“网络请求不存在”，
时长：1500，
禁止点击：真
});
打破；
//对于其他错误，直接抛出错误提示。
默认值：
吐司({
消息：error.response.data.message
时长：1500，
禁止点击：真
});
}
return Promise.reject(错误.响应)；
}否则{
//处理断网的情况
//eg:更新请求超时或网络断开时的状态的网络状态。
//网络状态控制app.vue中全局断网提示组件的显示和隐藏
//刷新断开的组件中的数据将在断开的组件中解释。
store.commit(changeNetwork ，false)；
}
});
//最后导出实例
导出默认服务；
三、api接口统一管理
创建了一个新的api文件夹，其中包含一个index.js和几个按照模块划分的接口js文件。Index.js是一个api的出口，其他的js用来管理各种模块的接口。
例如，下面的article.js:
/**
*文章模块界面列表
*/
从“@/network/http”导入请求；//导入在http中创建的axios实例
从“qs”导入QS；//是否根据需求导入qs模块
常量文章={
//新闻列表
文章列表(){
退货请求({
URL:“/artical”，
方法：“get”，
参数，
Hideloading: false //设置不隐藏加载
})
},
//新闻详情，演示
文章详细信息(id，参数){
退货请求({
URL:“/detail”，
方法：“get”，
参数：{
商品编号
},
hideloading: true
})
},
//提交帖子
登录(数据){
退货请求({
URL:“/adduser”，
方法： post ，
Data:qs.stringify(data)，//注意用于post提交的数据参数
hideloading: true
})
}
//其他接口……………
}
导出默认文章；
index.js的代码
/**
* API接口的统一导出
*/
//文章模块接口
从“@/api/article”导入文章；
//其他模块的接口.
//导出接口
导出默认值{
文章，
//……
}
在组件中使用(按需导入)
从“@/api/index”导入{article}
已创建(){
article.articleList()。然后(info={
如果(信息代码==200)
this.num=info.data
}
})
}
api挂载在vue.prototype上，省去了入门的步骤。
为了方便api的调用，我们需要把它挂载到vue的原型上。在main.js中
从“vue”导入Vue
从导入应用程序。/App
从导入路由器。/router //导入路由文件
从导入存储。/store ///导入vuex文件
从导入api。/api //导入api接口
Vue.prototype. $ api=api//在vue的原型上挂载api复制代码
然后我们可以在组件中使用它。
//不需要导入
方法：{
加载(id) {
这个。$api.article.articleDetail(id，{
空气污染指数：123
}).然后(res={
//执行一些操作
})
}
}
网络断开的处理
模板
div id=应用程序
div v-if=！网络
H3我没有互联网/h3
Div @click=onRefresh 刷新/div
/div
路由器-视图/
/div
/模板
脚本
从“vuex”导入{ mapState }；
导出默认值{
名称：“应用程序”，
计算值：{
.mapState([network])
},
方法：{
//通过跳转到一个空页面然后返回来刷新当前页面数据。
onRefresh () {
这个。$router.replace(/refresh )
}
}
}
/脚本
//refresh.vue
beforeRouteEnter(收件人，发件人，下一个){
接下来(虚拟机={
vm。$router.replace(from.fullPath)
})
}
总结
这就是这篇关于vue打包axios和api接口管理的文章。有关vue打包axios和api接口的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。