全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10959411.html,多谢,=。=~

axios用多了就开始疑惑它里面到底是个啥,虽然总被告知它就是基于ajax的封装,但掐指一算,事情应该没这么简单,于是开始深挖,挖着挖着就挖到了Promise。毕竟axios的官方描述是这样的:Promise based HTTP client for browser and node.js。而axios其中一个特点就是Supports the Promise API,以前只知道promise是一种替代层层回调的解决方案,但现在看来我认为很有必要详细的研究一下。

背景

在JavaScript的世界中,所有代码都是单线程执行的。该特性导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行(否则容易发生阻塞)。异步执行可以用回调函数实现,该方式会在将来的某个时间点触发一个函数调用(回调)。但异步执行中的回调并不利于代码复用,例如:

request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return success(request.responseText);
} else {
return fail(request.status);
}
}
}

但如果是这样的链式写法就会好很多(先统一执行AJAX逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用success函数或fail函数):

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
.ifFail(fail);

什么是Promise?

上述“承诺将来会执行”的对象在JavaScript中称为Promise对象,它有各种开源实现,但后面ES6将其写进了语言标准,统一了用法,原生提供了Promise对象,由浏览器直接支持。

Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。

Promise是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

ES6规定,Promise对象是一个构造函数,用来生成Promise实例:

var promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

resolve:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去;

Promise实例生成以后,可以用then方法、catch方法分别指定Resolved状态和Rejected状态的回调函数:

// Promise测试(then、catch)
new Promise(function(resolve,reject) {
let num = Math.random() * 2;
console.log("产生的随机数为:" + num);
setTimeout(function () {
if(num < 1) {
console.log("即将执行成功");
resolve("200 OK");
} else {
console.log("即将执行失败");
reject("失败的原因是num为:" + num);
}
}, num * 1000);
}).then(function(r) {
console.log("then:" + r);
}).catch(function(j) {
console.log("catch:" + j);
});

PS:只用then也可以代替上述效果,因为then可以接受两个回调函数作为参数,第二个参数可选。第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Rejected时调用:

promise.then(function(value) {
// success
}, function(error) {
// failure
});

链式多任务串行

有若干个异步任务,需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。要串行执行这样的异步任务,不用Promise需要写一层一层的嵌套代码,而使用Promise则可以采用链式写法:job1.then(job2).then(job3).catch(handleError)

// Promise测试(多任务串行执行)
var p = new Promise(function (resolve, reject) {
console.log("resolve开始");
resolve(8);
}); function multi(param) {
return new Promise(function(resolve, reject) {
console.log("计算" + param + "*" + param + ":");
setTimeout(resolve, 1500, param * param);
});
}; function add(param) {
return new Promise(function(resolve, reject) {
console.log("计算" + param + "+" + param + ":");
setTimeout(resolve, 1500, param + param);
});
}; p.then(multi).then(add).then(multi).then(function(param){
console.log("得到最终的值为:" + param);
});

Promise.all()实现多任务并行

一个页面聊天系统,我们需要从两个不同的URL分别获得用户的个人信息和好友列表,这两个任务是需要并行执行的,用Promise.all()实现如下:

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']
});

Promise.race()实现多任务赛跑

有些时候,多个异步任务是为了容错。比如,同时向两个URL读取用户的个人信息,只需要获得先返回的结果即可,其他任务的结果会被丢弃。这种情况下,用Promise.race()实现:

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'
});

参考资料

Promise:https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

ECMAScript 6 Promise对象:https://www.w3cschool.cn/ecmascript/3uge1q5v.html

一点对Promise的理解与总结的更多相关文章

  1. 「每日一题」面试官问你对Promise的理解?可能是需要你能手动实现各个特性

    关注「松宝写代码」,精选好文,每日一题 加入我们一起学习,day day up 作者:saucxs | songEagle 来源:原创 一.前言 2020.12.23日刚立的flag,每日一题,题目类 ...

  2. promise的理解和使用

    1. Promise是什么 1.1 promise 的理解 1. 抽象表达: Promise 是 JS 中进行异步编程的新的解决方案(旧的是纯回调形式) 2. 具体表达: (1)从语法上说:Promi ...

  3. 一点关于this的理解

    关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...

  4. promise的理解

    为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在 ...

  5. promise的理解和应用

    老铁们,我又满血复活了,今天我准备来吹一波我对promise,如有错吴请直接指出,明白了吗?话不多说开始吧 首先我们需要知道啥叫promise,我问了问大佬,他说这个东西是 异步操作的同步代码(but ...

  6. 谈谈你对Promise的理解

    一.Promise是什么? 理解 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案(备注:旧方案是单纯使用回调函数) 具体表达: 从语法 ...

  7. 对Promise的理解?

    ES6原生提供了promise对象 所谓Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通过是一个异步操作),并且这个事件提供统一的API,可供进一步处理 P ...

  8. 谈谈我对Promise的理解

    一.Promise是什么? Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大. ES6 将其写进了语言标准,统一了用法,原生提供了Pr ...

  9. 深入理解promise

    如今promise大行其道,关于异步方面的几乎都有它的影子,新的fetch api返回的是promise对象,generator中的yield后面一般也会跟promise对象,async的await后 ...

随机推荐

  1. 星级评分--封装成jquery插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 由sock引起的感想

    昨天晚上和同学聊天,他问我你敲了这么多TCP,UDP.到底掌握了什么,我说我敲了很多例子.对这两个模式很清晰,顺便练习了多进程,线程等等. 他说,这样不太好.我一直只是拿这两个例子在练习,没有真正的在 ...

  3. 自定义log4j的appender写es日志

    本篇和大家分享的是自定义log4j的appender,用es来记录日志并且通过kibana浏览es记录:就目前互联网或者一些中大型公司通常会用到第三方组合elk,其主要用写数据到es中,然后通过可视化 ...

  4. 315. Count of Smaller Numbers After Self(Fenwick Tree)

    You are given an integer array nums and you have to return a new counts array. The counts array has ...

  5. Unity 5着色器系统代码介绍(下)

    http://forum.china.unity3d.com/thread-25738-1-10.html 上一篇对着色器系统的工作原理做了介绍,现在我们将继续深入,将目光聚焦在标准着色器的光照函数. ...

  6. python 之 序列化与反序列化、os模块

    6.6 序列化与反序列化 特殊的字符串 , 只有:int / str / list / dict 最外层必须是列表或字典,如果包含字符串,必须是双引号"". 序列化:将Python ...

  7. JSF 与 struts2

    http://suhuanzheng7784877.iteye.com/blog/1041411

  8. nginx 第二课

    基本配置格式 Nginx全局配置参数 使用include文件 HTTP的server部分 虚拟服务器部分 location —— where,when,how. mail的server部分. 完整的示 ...

  9. PHP全国省市区地址分割提取脚本程序

    github地址: https://github.com/zmxfree/addressapart 比如将 浙江省杭州市江干区XX路X号 分割成 浙江省 杭州市 江干区 XX路X号,方便excel操作 ...

  10. Spring boot中应用jpa jpa用法

    https://blog.csdn.net/u012582402/article/details/78717705