VuePromise的axios请求封装详解_axios封装详解 - CSDN文库

5星 · 超过95%的资源 85 浏览量更新于2023-03-03 评论收藏 58KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue Promise的的axios请求封装详解请求封装详解

主要介绍了Vue Promise的axios请求封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一

起跟随小编过来看看吧

现在应该大部分公司都是前后端分离了。so，数据请求的封装还是必须的。

为了实现向ios中block封装请求的异步的效果，我采用JavaScript中promise这个对象。

var p1 = New promise((resolve,reject)=>{

var timeOut = Math.random() * 2;

log('set timeout to: ' + timeOut + ' seconds.');

setTimeout(function () {

if (timeOut < 1) {

log('call resolve()...');

resolve('200 OK');

}

else {

log('call reject()...');

reject('timeout in ' + timeOut + ' seconds.');

}

}, timeOut * 1000);

})

其中resolve,reject就相当于是你定义了两个block，然后把数据传出去。

继续往下看,紧接着上面的代码

var p2 = p1.then(function (result) { //resolve 导出的数据

console.log('成功：' + result);

});

var p3 = p2.catch(function (reason) { //reject 导出的数据

console.log('失败：' + reason);

});

通过查阅资料还发现另外两种用法，Promise.all 和 Promise.race这两种。

var p1 = new Promise(function (resolve, reject) {

setTimeout(resolve, 500, 'P1');

});

var p2 = new Promise(function (resolve, reject) {

setTimeout(resolve, 600, 'P2');

});

// 同时执行p1和p2，并在它们都完成后执行then:

Promise.all([p1, p2]).then(function (results) {

console.log(results); // 获得一个Array: ['P1', 'P2']

});

这一种是p1 和 p2 都返回了数据，才会执行all后面的then函数。挺像ios中GCD的notify函数

第二种第二种

var p1 = new Promise(function (resolve, reject) {

setTimeout(resolve, 500, 'P1');

});

var p2 = new Promise(function (resolve, reject) {

setTimeout(resolve, 600, 'P2');

});

Promise.race([p1, p2]).then(function (result) {

console.log(result); // 'P1'

});

race跑步的意思，看谁跑得快，跑得慢的就被摒弃掉了。

上面这些是封装的基础，下面来看具体应用上面这些是封装的基础，下面来看具体应用#

基于axios的请求封装

//判断请求环境来区分链接生产环境和测试环境

const ajaxUrl = env === 'development' ?

'https://www.baidu.com' :

env === 'production' ?

'https://www.baidu.com' :

'https://www.baidu.com';

util.ajax = axios.create({

baseURL: ajaxUrl,

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论10

FelaniaLiu

2023-06-20

打破了很多axios请求封装方案的固有思路，让我们有更多的选择和创新空间。

weixin_38655309

粉丝: 5
资源: 905

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈