参考链接:https://segmentfault.com/a/1190000018396987
原作者:https://segmentfault.com/u/snoopy_5bd90c6b37f8e
什么是Promise?
Promise 对象表示一个异步操作的最终结果。
比如axios的请求结果,无论成功失败
为什么使用Promise?
1、避免多层回调嵌套2、提供统一接口
使用规范
- 必须有then方法,同时then返回一个Promise对象。
- then方法接受两个参数,分别是成功时的回调和失败时的回调
- 同一个Promise的then可以调用多次,并且回调的执行顺序跟它们被定义时的顺序一致。
- then可以接受另一个Promise传入,也接受一个“类then”的对象或方法,即thenable对象。ajax就是一个thenable对象。
ES6 Promise基本用法
1. 创建Promise对象。
- new Promise(fn) 返回一个Promise对象
- 在 fn 中指定异步等处理。
- 处理结果正常的话,调用 resolve(处理结果值)。
- 处理结果错误的话,调用 reject(Error对象)。
2、
Promise.resolve(value)
有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用。
该函数的参数四种情况:
(1)参数是一个Promise实例,那么Promise.resolve将不做任何操作,原封不动的将实例返回。
(2)参数是一个thenable对象,会将其转为Promise对象,然后立即执行该对象的then方法。
(3)参数不是具有then方法的对象,或根本就不是对象。比如说字符之类,则Promise.resolve方法返回一个新的Promise对象,并且状态Resolved。
(4)不带有任何参数,直接返回一个状态为Resolved的Promise对象。
Promise.reject()
Promise.reject(reason)方法也会返回一个新的Promise实例,该实例的状态为rejected。
注意:使用Promise.resolve()创建Promise对象
// 静态方法 Promise.resolve(value) 可以认为是 new Promise() 方法的快捷方式
Promise.prototype.then()
- then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。
- then方法返回的是一个新的Promise对象。因此可以采用链式写法,即then方法后面再调用另一个then方法。
- Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获
Promise.prototype.catch()
- Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
- then方法指定的回调函数运行中抛出错误会被catch方法捕获。
Promise.race(iterable)
race 函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。
Promise只能执行异步
var promise = new Promise(function(resolve) {
console.log("inner promise"); // 1
resolve(42);
});
promise.then(function(value) {
console.log(value); // 3
});
console.log("outer promise"); // 2
代码运行结果如下
> "inner promise"
> "outer promise"
> 42
分析:这里可以看出new Promise的时候依然同步,但是调用then方法后是异步的
注:Axios 是一个基于 promise 的 HTTP 库
补充:参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises
在旧式回调 API 中创建 Promise
通过 Promise 的构造器从零开始创建 Promise
。 这种方式(通过构造器的方式)应当只在包裹旧 API 的时候用到。
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
问题:
1、new Promise的时候必须带有两个回调函数吗?如下例中的resolve和reject
//示例
function getURL(URL) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", URL);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
解答:不需要,只传一个resolve函数也是可以的,前面有例子可以说明