vue中引入axios,vue请求接口封装

　　axios的封装和按照业务模块统一管理API接口，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求。有兴趣的同学可以参考一下。

　　其实vue包装axios很简单。

　　首先，在src路径下构建http文件夹，并创建三个文件：api.jsenv.jsrequest.js。

　　Env.js文件

　　这个文档主要封装了我们的公共地址。

　　导出默认值{

　　//开发环境

　　开发人员：{

　　BaseUrl:“公共地址开发环境”

　　},

　　//测试环境测试

　　测试：{

　　BaseUrl:“测试环境的公共地址”

　　},

　　//在线界面

　　产品：{

　　BaseUrl:“在线环境的公共地址”

　　}

　　};

　　request.js文件

　　这主要是创建axios并封装请求拦截和相应的拦截。

　　从“axios”导入axios；

　　从导入环境。/env ；

　　//这是私有域名，但是不用写。

　　var vipUrl=/app ；

　　//创建axios实例

　　const service=axios.create({

　　//在这里进行在线接口测试

　　baseUrl: env.prod.baseUrl vipUrl，

　　头：{}，//请求头

　　Settimeout:2000，//超时

　　});

　　//添加请求拦截器

　　service . interceptors . request . use(

　　配置={

　　//在发送请求之前做一些事情

　　config . headers[ device type ]= H5 ；

　　Console.log(请求的数据：，config)；

　　返回配置；

　　},

　　错误={

　　//对请求错误做些什么

　　Return Promise.reject (error ，error)；

　　}

　　);

　　//添加响应拦截器

　　服务.拦截器.响应.使用(

　　响应={

　　//对响应数据做些什么

　　//console.log(返回数据，响应)；

　　返回响应；

　　},

　　错误={

　　//对响应错误采取措施

　　return Promise.reject(错误)；

　　}

　　);

　　导出默认服务；

　　api.js

　　该文件主要包含所需的接口地址。

　　//引入request.js文件

　　从导入请求。/request ；

　　//旋转木马

　　导出函数getBanners(数据){

　　退货请求({

　　Url: /banner ，//这个地址是去掉公有地址和私有域名后剩下的地址。

　　方法：“GET”，//请求模式支持多种方式获取post put delete等等。

　　数据//如果没有参数，则可能不会写入发送请求中要配置的参数。

　　});

　　}

　　最后是页面中的引用。

　　当页面需要请求数据时，引入相应的方法。比如我的主页需要介绍banner。

　　脚本

　　//引入所需的接口

　　从导入{ getBanners }./http/API ；

　　导出默认值{

　　姓名：家，

　　组件：{}，

　　已安装(){

　　//直接使用。然后是成功请求的回调。catch是失败请求的回调。

　　getBanners()。然后(结果={

　　window.console.log(111 ，结果)；

　　})。catch(错误={

　　window.console.log(222 ，err)；

　　});

　　},

　　方法：{}

　　};

　　/脚本

　　这就是如何用vue封装axios请求的细节。关于用vue封装axios请求的更多信息，请关注我们的其他相关文章！

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