vue封装axios全局使用,vue集成axios

　　本文主要介绍在vue中封装axios，实现api接口统一管理的方法，帮助大家更好的理解和使用vue。感兴趣的朋友可以了解一下。

　　在vue项目中，我们通常使用axios与后台进行交互。axios有很多有用的功能，这里就不介绍了。详情请参考axios中文网。在封装axios之前，我们需要使用vue搭建工具创建一个vue项目(这里我使用的是cli4)。

安装

　　cnpm安装axios -保存-开发；//安装axios

　　cnpm安装QS-save-dev；//安装qs模块，用来序列化post类型的数据，否则后端无法接收数据。

模块引入

　　在src目录下创建一个服务目录，存储接口封装的相关文件。然后在service目录下创建service.js用于axios和qs模块的介绍，并将axios封装在这个文件中。代码如下(只有一个接口域名时):

　　从“axios”导入axios/导入axios

　　引入从“QS”//QS的导入来序列化post类型的数据，否则后端无法接收数据。

　　//设置post请求头

　　axios . defaults . headers . post[ Content-Type ]= application/x-www-form-urlencoded；charset=UTF-8 ；

　　axios . defaults . with credentials=false；//跨域请求时，不会携带用户凭据；Cookie在返回的响应中也会被忽略。

　　//创建一个请求超时为300秒的axios实例。

　　const instance=axios.create({

　　超时：300000，

　　});

　　//请求和响应拦截可以根据实际项目需求编写

　　//在请求发起前拦截

　　instance . interceptors . request . use((config)={

　　//这里可以操作接口请求头，比如：config . headers[ x-token ]=token。

　　Console.log(请求拦截，config)；

　　返回配置；

　　}，(错误)={

　　//对请求错误做些什么

　　退货承诺.拒绝(错误)

　　})

　　//响应拦截(请求返回后拦截)

　　instance . interceptors . response . use(response={

　　Console.log(响应拦截，响应)；

　　返回响应；

　　}，错误={

　　console.log(catch ，错误)

　　退货承诺.拒绝(错误)

　　})

　　//根据请求类型封装axios

　　const api={

　　获取(url，数据){

　　返回instance.get(url，{params:data})

　　},

　　帖子(url，数据){

　　返回instance.post(url，qs.stringify(data))

　　},

　　}

　　导出{api}

　　上面的代码是只有一个接口域名的情况(大多数情况)。当有多个接口域名时(少数情况)，我们需要对之前的包进行改造。代码如下：

　　从“axios”导入axios/导入axios

　　引入从“QS”//QS的导入来序列化post类型的数据，否则后端无法接收数据。

　　//设置post请求头

　　axios . defaults . headers . post[ Content-Type ]= application/x-www-form-urlencoded；charset=UTF-8 ；

　　axios . defaults . with credentials=false；//跨域请求时，不会携带用户凭据；Cookie在返回的响应中也会被忽略。

　　//创建一个axios实例，请求超时300秒。因为项目中有多个域名，所以需要对应创建多个axios实例。

　　const instanceA=axios.create({

　　超时：300000，

　　});

　　const instanceB=axios.create({

　　超时：300000，

　　});

　　//如果项目是单域名，这里不需要配置。当项目接口有多个域名时，需要配置axios实例的基本路径，否则无法在项目生产环境中进行不同的调用。

　　if(process . ENV . node _ ENV== production ){

　　instance a . defaults . base URL= https://www . production _ a . com ；

　　instance b . defaults . base URL= https://www . production _ b . com ；

　　}

　　//请求和响应拦截可以根据实际项目需求编写

　　//在请求发起前拦截

　　instance a . interceptors . request . use((config)={

　　//这里可以操作接口请求头，比如：config . headers[ x-token ]=token。

　　Console.log(请求拦截，config)；

　　返回配置；

　　}，(错误)={

　　//对请求错误做些什么

　　退货承诺.拒绝(错误)

　　})

　　instance b . interceptors . request . use((config)={

　　Console.log(请求拦截，config)；

　　返回配置；

　　}，(错误)={

　　//对请求错误做些什么

　　退货承诺。拒绝（错误)

　　})

　　//响应拦截（请求返回后拦截)

　　实例a拦截器。回应。使用(response={

　　console.log(响应拦截，回应);

　　返回响应；

　　},错误={

　　console.log(catch ，错误)

　　退货承诺。拒绝（错误)

　　})

　　实例b拦截器。回应。使用(response={

　　console.log(响应拦截，回应);

　　返回响应；

　　},错误={

　　console.log(catch ，错误)

　　退货承诺。拒绝（错误)

　　})

　　//按照请求类型对爱可信进行封装

　　const api={

　　获取(网址，数据){

　　返回instanceA.get(url，{params:data})

　　},

　　帖子(网址，数据){

　　return instanceA.post(url，qs.stringify(data))

　　},

　　doGet(网址，数据){

　　返回instanceB.get(url，{params:data})

　　},

　　doPost(url，数据){

　　返回instanceB.post(url，qs.stringify(data))

　　}

　　}

　　导出{api}

　　上述代码中有根据生产环境对爱可信实例的基础路径进行配置，如果项目中有多个环境（如：测试环境等),则需要对CLI4脚手架环境变量进行配置

api接口统一管理

　　将美国石油学会(美国石油协会)接口按照功能模块进行拆分，把同一模块下的接口写在同一个文件中进行统一管理，这样代码会更容易维护。比如我们的项目中有新闻模块，音乐模块等。我们就在塞尔维克目录中创建新闻网、音乐网文件，用于管理各自模块的所有美国石油学会(美国石油协会)接口，这里我只拿新闻网文件为例，代码如下：

　　从""导入{api} ./服务。js’；

　　常数新闻={

　　getNewsList(){//获取新闻列表

　　返回api.get(api/news/getNewsList )

　　},

　　editNewsDetail(data){//修改新闻详情

　　返回API。post( API/news/editnewsdail )，数据);

　　}

　　}

　　导出默认新闻；

　　为了更方便在项目中调用这些封装好的接口，我们需要将这些接口挂载到某视频剪辑软件的原型上，首先我们要在服务目录中创建api.js文件，将所有模块的美国石油学会(美国石油协会)管理文件引入进来，然后进行统一导出，代码如下：

　　//引入相关美国石油学会(美国石油协会)管理模块

　　从导入新闻.新闻。js’；

　　//进行统一导出

　　导出默认值{

　　新闻

　　}

　　找到项目中的主页。射流研究…文件，将接口挂载到某视频剪辑软件的原型上，代码如下：

　　从“vue”导入某视频剪辑软件

　　从导入应用程序 App.vue

　　从导入路由器。/路由器

　　从导入存储。/商店

　　从" axios "导入爱可信

　　Vue.prototype.axios=axios

　　Vue.config.productionTip=false

　　从导入api ./service/API。js’；

　　//将封装的接口挂载到某视频剪辑软件原型上

　　Vue.prototype. $ api=api

　　新Vue({

　　路由器，

　　店，

　　render: h=h(App)

　　}).$ mount("# app ")

　　然后我们在项目创建完成时自动生成的模板文件App.vue调用封装好的接口，代码如下：

　　模板

　　div id=应用程序

　　div id=nav

　　路由器链接到=/ Home/路由器链接

　　路由器链接到=/about about/路由器链接

　　button @click=getN 接口封装获取/按钮

　　button @click=postN 接口封装海报/按钮

　　/div

　　路由器-视图/

　　/div

　　/模板

　　脚本

　　导出默认值{

　　方法：{

　　getN(){

　　这个api.news.getNewsList().然后((res)={

　　控制台。日志(分辨率)；

　　})

　　},

　　postN(){

　　let OpenID= oo 5 TQ 5 vmppuzlqwfxhpmwjqwsanm ；

　　让产品代码= pro-1337270496655446016 ；

　　这个10.99美元API。新闻。编辑新闻详细信息({ OpenID，productCodes}).然后((res)={

　　警报(参考数据。味精)；

　　})

　　}

　　}

　　}

　　/脚本

　　样式lang=scss

　　#app {

　　字体系列：Avenir、Helvetica、阿里亚、无衬线；

　　-WebKit-字体-平滑：抗锯齿；

　　-moz-osx-font-smoothing:灰度；

　　文本对齐：居中；

　　颜色：# 2c3e50

　　}

　　#nav {

　　填充：30px

　　一个{

　　字体粗细：粗体；

　　颜色：# 2c3e50。路由器-链路-精确-活动{

　　颜色：# 42b983

　　}

　　}

　　}

　　/风格

配置代理

　　因为我们要在本地环境进行测试，这就涉及到了跨域问题，为了解决跨域问题，我们可以进行代理的配置，在项目根目录中创建vue。配置。射流研究…文件，然后可以对项目进行各种配置，代理的配置方法如下：

　　//vue.config.js

　　模块。导出={

　　//输出文件目录

　　输出目录：距离，

　　//eslint-loader是否在保存的时候检查

　　lintOnSave:假的，

　　//基本路径

　　公共路径：过程。环境。node _ ENV=== production ？/ : /,

　　devServer: {

　　主机："本地主机",

　　端口：8080,

　　开：真的，

　　hotOnly: true，//热更新

　　//设置代理

　　代理服务器：{

　　/api: {

　　//本地模拟服务器

　　目标： https://www.xxxx.com/xxx/，

　　changeOrigin:真的，

　　ws:假的，

　　},

　　//如果项目中有多个域名接口，可以依次配置。

　　/apib:{

　　目标： https://www.xxxx.com/xxx/，

　　changeOrigin:真的，

　　ws:假的，

　　},

　　},

　　},

　　};

　　配置代理后，您可以运行项目。在命令行中输入npm run serve。项目启动后，可以进入页面点击按钮，测试之前做的封装是否工作良好。

结语

　　这是我在vue中包装axios的经验。文章如有错误或改进请联系我，我会及时改正。感谢阅读。

　　那就是把axios封装在vue中，实现api接口统一管理的细节。更多关于在vue中封装axios的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。