首页 > 编程知识 正文

企业级axios封装,vue项目封装axios

时间:2023-05-05 22:54:07 阅读:11158 作者:773

3359 www.Kan cloud.cn/yunye/axios/234845

一. axios的功能特点

在浏览器中发送xmlhttp请求

在node.js上发送http请求

专业版API支持

拦截请求和响应

请求和响应数据的转换

支持多种请求方式:

是axios(config )

axios.request(config ) )。

axios.get(URL (,config] ) ) )

axios.delete(URL ),config] ) )

axios.head(URL (,config] ) )

axios.post(URL[,data[,config]] ) )

axios.put(URL[,data[,config]] ) )

axios.patch(URL[,data[,config]] ) )

二.一般配置选项

帐单地址

URL :‘/user’、

请求类型

方法:‘get’、

请给我根路径

base URL :‘http://www.mt.com/API’,

请求前的数据处理

变换请求: [功能(数据) },

请求后的数据处理

传输响应: [功能(数据) },

自定义请求标头

headers : {‘x-requested-with’:‘xmlhttprequest’}、

URL查询对象对应于get请求、参数传递

params:{ id: 12 },

查询对象序列化函数

参数串列化器3360功能(params ) }

requestbody :对应开机自检请求,传递请求数据

data : { key :‘aa’}是,

超时设定s

时间输出: 1000,

域之间是否有Token

with凭证:假,

定制请求处理

适配器:功能(解决、reject、config )、

认证信息

auth : { uname :‘’、pwd :‘12’}、

的数据格式JSON/blob/document/array buffer/text/stream

response type :‘JSON’、

三. axios软件包

步骤axios的安装

NPM安装轴--save

导入步骤main.js

importaxiosfrom‘axios '

封装到步骤request.js

方法1 :必须传递三个参数回调函数的方法

importaxiosfrom ' axios ' exportfunction request (config,success, failure(//axios创建实例constinstance=axios.creat ) ) base URL : (http://192.168.14.146:8088 )、time out 3333336 回调到发送真正网络请求的instance(config.baseconfig ).then(RES={//console.log ) RES )/success (访问配置) reeess )

导入{请求}来自'./网络/请求'//方式1 :请求((/configurl : ),),RES=)//successconsole

创建导出函数请求(config ) axios实例constinstance=axios.creat ) (base URL : ' http://192.168.14.1463360880 发送真正网络请求的instance(config.baseconfig ).then ) RES=(/console.log ) RES ) /此处无法直接处理数据并将其返回到config.catch

request(baseconfig: (、success:function )、RES )、failure:function (、err ) )方式Promise方法

导出函数请求(配置)返回新协议) )解析, 创建reject () axios实例constinstance=axios.creat ) ) base URL :653358192.168.14.146:8088 )、timeout: 50000 } 发送真正网络请求的instance(config ).then(RES={//console.log ) RES )//resolve(/回调(/) ) ) ) ) ) axios本身就是promise ) )所以

创建导出函数请求(config ) axios实例constinstance=axios.creat ) (base URL : ' http://192.168.14.1463360880 由于发送真正网络请求的返回实例(config )//create的axios返回值本身是promise,因此直接返回即可,无需自行包装promise (返回)调用:

//方式3request(URL: ',} ).then ) RES={ console.log } RES ).catch(err={console.log ) ) )

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。