前言:昨天从promise和async await的概念和区别开始,到文档解析的时候defer和async区别的总结;然后简单介绍了同步异步的概念,最后到实现异步的方法。实现异步的方法中异步编程进化史:callback->promise->generator->async+await,今天就重点学一下实现异步的方法和promise相关的介绍与使用。
1. promise 和 async await区别
2. defer和async区别
3. 同步和异步
4. 实现异步的方法
回调函数(Callback)、事件监听、发布订阅、Promise/A+、生成器Generators/ yield、async/await
-
JS 异步编程进化史:callback -> promise -> generator -> async + await
-
async/await 函数的实现,就是将 Generator 函数和自动执行器,包装在一个函数里。
-
async/await可以说是异步终极解决方案了。
(1) async/await函数相对于Promise,优势体现在:
- 处理 then 的调用链,能够更清晰准确的写出代码
- 并且也能优雅地解决回调地狱问题。
当然async/await函数也存在一些缺点,因为 await 将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低,代码没有依赖性的话,完全可以使用 Promise.all 的方式。
(2) async/await函数对 Generator 函数的改进,体现在以下三点:
- 内置执行器。 Generator 函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器。也就是说,async 函数的执行,与普通函数一模一样,只要一行。
- 更广的适用性。 co 函数库约定,yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。
- 更好的语义。 async 和 await,比起星号和 yield,语义更清楚了。async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。
方法详析:
-
回调函数(Callback)
回调函数是异步操作最基本的方法。以下代码就是一个回调函数的例子:
1
2
3
ajax(url, () => {
// 处理逻辑
})
但是回调函数有一个致命的弱点,就是容易写出回调地狱(Callback hell)。假设多个请求存在依赖性,你可能就会写出如下代码:
1
2
3
4
5
6
7
8
9
ajax(url, () => {
// 处理逻辑
ajax(url1, () => {
// 处理逻辑
ajax(url2, () => {
// 处理逻辑
})
})
})
回调函数的优点是简单、容易理解和实现,缺点是不利于代码的阅读和维护,各个部分之间高度耦合,使得程序结构混乱、流程难以追踪(尤其是多个回调函数嵌套的情况),而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误,不能直接 return。
-
事件监听
这种方式下,异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
下面是两个函数f1和f2,编程的意图是f2必须等到f1执行完成,才能执行。首先,为f1绑定一个事件(这里采用的jQuery的写法)
1
f1.on(
'done'
, f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写:
1
2
3
4
5
6
function
f1() {
setTimeout(
function
() {
// ...
f1.trigger(
'done'
);
}, 1000);
}
上面代码中,f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2。
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合",有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。
-
发布订阅
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。
首先,f2向信号中心jQuery订阅done信号。
1
jQuery.subscribe(
'done'
, f2);
然后,f1进行如下改写:
1
2
3
4
5
6
function
f1() {
setTimeout(
function
() {
// ...
jQuery.publish(
'done'
);
}, 1000);
}
上面代码中,jQuery.publish('done')的意思是,f1执行完成后,向信号中心jQuery发布done信号,从而引发f2的执行。 f2完成执行后,可以取消订阅(unsubscribe)
1
jQuery.unsubscribe(
'done'
, f2);
这种方法的性质与“事件监听”类似,但是明显优于后者。因为可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
-
Promise/A+
Promise本意是承诺,在程序中的意思就是承诺我过一段时间后会给你一个结果。 什么时候会用到过一段时间?答案是异步操作,异步是指可能比较长时间才有结果的才做,例如网络请求、读取本地文件等
4.1 Promise的三种状态
- Pending----Promise对象实例创建时候的初始状态
- Fulfilled----可以理解为成功的状态
- Rejected----可以理解为失败的状态
这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了,比如说一旦状态变为 resolved 后,就不能 再次改变为Fulfilled
1
2
3
4
5
6
7
8
9
10
11
12
let p =
new
Promise((resolve, reject) => {
reject(
'reject'
)
resolve(
'success'
)
//无效代码不会执行
})
p.then(
value => {
console.log(value)
},
reason => {
console.log(reason)
//reject
}
)
当我们在构造 Promise 的时候,构造函数内部的代码是立即执行的
1
2
3
4
5
6
new
Promise((resolve, reject) => {
console.log(
'new Promise'
)
resolve(
'success'
)
})
console.log(
'end'
)
// new Promise => end
4.2 promise的链式调用
-
每次调用返回的都是一个新的Promise实例(这就是then可用链式调用的原因)
-
如果then中返回的是一个结果的话会把这个结果传递下一次then中的成功回调
-
如果then中出现异常,会走下一个then的失败回调
-
在 then中使用了return,那么 return 的值会被Promise.resolve() 包装(见例1,2)
-
then中可以不传递参数,如果不传递会透到下一个then中(见例3)
-
catch 会捕获到没有捕获的异常
接下来我们看几个例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 例1
Promise.resolve(1)
.then(res => {
console.log(res)
return
2
//包装成 Promise.resolve(2)
})
.
catch
(err => 3)
.then(res => console.log(res))
复制代码
// 例2
Promise.resolve(1)
.then(x => x + 1)
.then(x => {
throw
new
Error(
'My Error'
)
})
.
catch
(() => 1)
.then(x => x + 1)
.then(x => console.log(x))
//2
.
catch
(console.error)
复制代码
// 例3
let fs = require(
'fs'
)
function
read(url) {
return
new
Promise((resolve, reject) => {
fs.readFile(url,
'utf8'
, (err, data) => {
if
(err) reject(err)
resolve(data)
})
})
}
read(
'./name.txt'
)
.then(
function
(data) {
throw
new
Error()
//then中出现异常,会走下一个then的失败回调
})
//由于下一个then没有失败回调,就会继续往下找,如果都没有,就会被catch捕获到
.then(
function
(data) {
console.log(
'data'
)
})
.then()
.then(
null
,
function
(err) {
console.log(
'then'
, err)
// then error
})
.
catch
(
function
(err) {
console.log(
'error'
)
})
Promise不仅能够捕获错误,而且也很好地解决了回调地狱的问题,可以把之前的回调地狱例子改写为如下代码:
1
2
3
4
5
6
7
8
ajax(url)
.then(res => {
console.log(res)
return
ajax(url1)
}).then(res => {
console.log(res)
return
ajax(url2)
}).then(res => console.log(res))
它也是存在一些缺点的,比如无法取消 Promise,错误需要通过回调函数捕获。
-
5.生成器Generators/ yield
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,Generator 最大的特点就是可以控制函数的执行。
-
语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
-
Generator 函数除了状态机,还是一个遍历器对象生成函数。
-
可暂停函数, yield可暂停,next方法可启动,每次返回的是yield后的表达式结果。
-
yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
我们先来看个例子:
1
2
3
4
5
6
7
8
9
function
*foo(x) {
let y = 2 * (yield (x + 1))
let z = yield (y / 3)
return
(x + y + z)
}
let it = foo(5)
console.log(it.next())
// => {value: 6, done: false}
console.log(it.next(12))
// => {value: 8, done: false}
console.log(it.next(13))
// => {value: 42, done: true}
可能结果跟你想象不一致,接下来我们逐行代码分析:
-
首先 Generator 函数调用和普通函数不同,它会返回一个迭代器
-
当执行第一次 next 时,传参会被忽略,并且函数暂停在 yield (x + 1) 处,所以返回 5 + 1 = 6
-
当执行第二次 next 时,传入的参数12就会被当作上一个yield表达式的返回值,如果你不传参,yield 永远返回 undefined。此时 let y = 2 * 12,所以第二个 yield 等于 2 * 12 / 3 = 8
-
当执行第三次 next 时,传入的参数13就会被当作上一个yield表达式的返回值,所以 z = 13, x = 5, y = 24,相加等于 42
我们再来看个例子:有三个本地文件,分别1.txt,2.txt和3.txt,内容都只有一句话,下一个请求依赖上一个请求的结果,想通过Generator函数依次调用三个文件
1
2
1
.txt
//1.txt文件
1
2
2
.txt
//2.txt文件
1
2
3
.txt
//3.txt文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let fs = require(
'fs'
)
function
read(file) {
return
new
Promise(
function
(resolve, reject) {
fs.readFile(file,
'utf8'
,
function
(err, data) {
if
(err) reject(err)
resolve(data)
})
})
}
function
* r() {
let r1 = yield read(
'./1.txt'
)
let r2 = yield read(r1)
let r3 = yield read(r2)
console.log(r1)
console.log(r2)
console.log(r3)
}
let it = r()
let { value, done } = it.next()
value.then(
function
(data) {
// value是个promise
console.log(data)
//data=>2.txt
let { value, done } = it.next(data)
value.then(
function
(data) {
console.log(data)
//data=>3.txt
let { value, done } = it.next(data)
value.then(
function
(data) {
console.log(data)
//data=>结束
})
})
})
从上例中我们看出手动迭代Generator函数很麻烦,实现逻辑有点绕,而实际开发一般会配合co库去使用。co是一个为Node.js和浏览器打造的基于生成器的流程控制工具,借助于Promise,你可以使用更加优雅的方式编写非阻塞代码。
安装co库只需:npm install co
上面例子只需两句话就可以轻松实现
1
2
3
4
5
6
7
8
9
10
11
12
13
function
* r() {
let r1 = yield read(
'./1.txt'
)
let r2 = yield read(r1)
let r3 = yield read(r2)
console.log(r1)
console.log(r2)
console.log(r3)
}
let co = require(
'co'
)
co(r()).then(
function
(data) {
console.log(data)
})
// 2.txt=>3.txt=>结束=>undefined
我们可以通过 Generator 函数解决回调地狱的问题,可以把之前的回调地狱例子改写为如下代码:
1
2
3
4
5
6
7
8
9
function
*fetch() {
yield ajax(url, () => {})
yield ajax(url1, () => {})
yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()
-
6.async/await
5.1 Async/Await简介
使用async/await,你可以轻松地达成之前使用生成器和co函数所做到的工作,它有如下特点:
1. async/await是基于Promise实现的,它不能用于普通的回调函数。
2. async/await与Promise一样,是非阻塞的。
1 |
|
一个函数如果加上 async ,那么该函数就会返回一个 Promise
1 2 3 4 |
|
Generator函数依次调用三个文件那个例子用async/await写法,只需几句话便可实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
5.2 Async/Await并发请求
如果请求两个文件,毫无关系,可以通过并发请求
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
5. Promise的介绍与使用
我们已经知道了解决回调地狱的两种方案:Promise和Async/await;而async await是基于Promise实现的,可以说是改良版的Promise,所以我们渴望去了解Promise,下面我们就学习一下promise吧
Promise 介绍:
ES6中的Promise 是异步编程的一种方案。从语法上讲,Promise 是一个对象,它可以获取异步操作的消息。
Promise对象, 可以将异步操作以同步的流程表达出来。使用 Promise 主要有以下好处:
- 可以很好地解决回调地狱的问题(避免了层层嵌套的回调函数)。
- 语法非常简洁。Promise 对象提供了简洁的API,使得控制异步操作更加容易。
Promise 使用:
语法
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
-
参数
executor函数在Promise构造函数执行时同步执行,被传递resolve和reject函数(executor函数在Promise构造函数返回新建对象前被调用)。
executor内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled(完成),或者将promise的状态改为rejected(失败)。
如果在executor函数中抛出一个错误,那么该promise状态为rejected。executor函数的返回值被忽略。 -
简单使用
1 2 3 4 5 6 7 8 9 |
|
原型方法
Promise.prototype.then(onFulfilled, onRejected)
-
语法
p.then(onFulfilled, onRejected);
p.then((value) => {// fulfillment}, (reason) => {// rejection}); -
含义
为Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。 -
链式操作
then方法返回的是一个新的promise,因此可以采用链式写法,即then方法后面再调用另一个then方法。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
new
Promise(resolve => {
resolve(1);
})
.then(result => console.log(result))
//1
.then(result => {
console.log(result);
//undefined
return
2;
})
.then(result => {
console.log(result);
//2
throw
new
Error(
"err"
);
})
.then((result) =>{
console.log(result);
}, (err)=>{
console.log(err);
//Error: err
return
3;
})
.then((result) => {
console.log(result);
//3
})
注意:①不管是then方法的onfulfilled函数参数执行还是onrejected(可选参数)函数参数执行,then方法返回的都是一个新的Promise对象,都可以继续采用链式写法调用另一个then方法。②Promise.prototype.catch()方法返回的也是一个Promise对象。then方法和catch方法可以链式操作。
-
返回值
then方法返回一个Promise,而它的行为与then中的被调用的回调函数(onfulfilled函数/onrejected函数)的返回值有关。
(1) 如果then中的回调函数返回一个值,那么then返回的Promise将会成为接受状态,并且将返回的值作为接受状态的回调函数的参数值。1
2
3
4
5
new
Promise((resolve, reject) => {
reject();
})
.then( () => 99, () => 42 )
.then( result => console.log(result));
// 42
(2) 如果then中的回调函数抛出一个错误,那么then返回的Promise将会成为拒绝状态,并且将抛出的错误作为拒绝状态的回调函数的参数值。
1
2
3
4
5
new
Promise((resolve, reject) => {
resolve();
})
.then( () => {
throw
new
Error(
'err'
)}, () => {})
.then( () => {}, (err) => {console.log(err)});
//Error: err
(3) 如果then中的回调函数返回一个已经是接受状态的Promise,那么then返回的Promise也会成为接受状态,并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
1
2
3
4
5
6
7
new
Promise((resolve, reject) => {
resolve();
})
.then( () => {
return
new
Promise(resolve => resolve(
'ok'
));
})
.then( (result) => {console.log(result)});
//ok
(4) 如果then中的回调函数返回一个已经是拒绝状态的Promise,那么then返回的Promise也会成为拒绝状态,并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
1
2
3
4
5
6
7
8
9
new
Promise((resolve, reject) => {
resolve();
})
.then( () => {
return
new
Promise((resolve, reject) => {
reject(
new
Error(
'err'
));
});
})
.then( () => {}, (err) => {console.log(err)});
//Error: err
(5) 如果then中的回调函数返回一个未定状态(pending)的Promise,那么then返回Promise的状态也是未定的,并且它的终态与那个Promise的终态相同;同时,它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。
1
2
3
4
5
6
7
8
9
new
Promise((resolve, reject) => {
resolve();
})
.then(() => {
return
new
Promise(resolve => {
setTimeout(resolve, 2000,
'ok'
);
});
})
.then( (result) => {console.log(result)});
//ok
注意:这里是then方法中被调用回调函数的返回值与then方法返回的Promise对象状态之间的关系。
Promise.prototype.catch(onRejected)
-
语法
1
2
3
4
5
p.
catch
(onRejected);
p.
catch
(
function
(reason) {
// 拒绝
});
-
含义
Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数,返回一个新的promise对象。 -
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
const p =
new
Promise((resolve,reject) => {
return
reject(
new
Error(
'err'
));
//reject方法的作用,等同于抛出错误
//throw new Error('err');
});
p.then(
null
, (err) => {
console.log(err);
//Err: err
});
//--------等价写法---------
p.
catch
(err => {
console.log(err);
//Err: err
})
注意:由于.catch方法是.then(null, rejection)的别名,故.then中的链式操作(3)、返回值(4)等语法在.catch中都适用。
-
一般总是建议,Promise对象后面要跟catch方法,这样可以处理Promise内部发生的错误。catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法。
-
Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。 即:当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误,如果没有错误,则当前catch方法不执行。
1
2
3
4
5
6
7
8
9
10
new
Promise(() => {
throw
new
Error(
'err1'
);
})
.then(() => {console.log(
1
);})
.then(() => {console.log(
2
);})
.
catch
((err) => {
console.log(err);
//Err: err1
throw
new
Error(
'err2'
);
})
.
catch
((err) => {console.log(err);})
//Err: err2
-
一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。
1
2
3
4
5
6
7
8
// bad
new
Promise()
.then((data) => {
/* success */
}, (err) => {
/* error */
});
// good
new
Promise()
.then((data) => {
/* success */
})
.
catch
((err) => {
/* error */
});
上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法。
-
与传统的try/catch代码块不同的是,即使没有使用catch方法指定错误处理的回调函数,Promise对象抛出的错误也不会中止外部脚本运行。
1
2
3
4
5
6
7
8
9
new
Promise((resolve) => {
// 下面一行会报错,因为x没有声明
resolve(x + 2);
}).then(() => {
console.log(
'ok'
);
});
setTimeout(() => {console.log(
'over'
)});
//Uncaught (in promise) ReferenceError: x is not defined
//over
-
在异步函数中抛出的错误不会被catch捕获到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new
Promise((resolve, reject) => {
setTimeout(() => {
throw
'Uncaught Exception!'
;
},
1000
);
}).
catch
(() => {
console.log(
'err'
);
//不会执行
});
new
Promise((resolve, reject) => {
setTimeout(() => {
reject();
},
1000
);
}).
catch
(() => {
console.log(
'err'
);
//err
});
-
在resolve()后面抛出的错误会被忽略
1
2
3
4
5
6
new
Promise((resolve, reject) => {
resolve();
throw
'Silenced Exception!'
;
}).
catch
(
function
(e) {
console.log(e);
// 不会执行
});
Promise.all(iterable)
-
语法
var p = Promise.all([p1, p2, p3]); -
含义
Promise.all方法接受一个数组作为参数,p1、p2、p3都是Promise实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。(Promise.all方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例。)
p的状态由p1、p2、p3决定,分成两种情况。
(1) 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2) 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。 -
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const p1 =
'p1-ok'
;
const p2 = Promise.resolve(
'p2-ok'
);
const p3 =
new
Promise((resolve) => setTimeout(resolve, 3000,
'p3-ok'
));
const p4 = Promise.reject(
'p4-err'
);
Promise.all([p1, p2, p3])
.then((resolves) => {
resolves.forEach(resolve => {
console.log(resolve);
//p1-ok p2-ok p3-ok
});
})
.
catch
(() => {
console.log(
'err'
);
});
Promise.all([p1, p2, p3, p4])
.then(() => {
console.log(
'ok'
);
})
.
catch
((err) => {
console.log(err);
//p4-err
})
Promise.race(iterable)
-
语法
var p = Promise.race([p1, p2, p3]); -
含义
Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数。
Promise.race方法的参数与Promise.all方法一样,如果不是Promise实例,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。 -
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var
p1 =
new
Promise(resolve => {setTimeout(resolve, 500,
"one"
);});
var
p2 =
new
Promise(resolve => {setTimeout(resolve, 100,
"two"
);});
Promise.race([p1, p2])
.then(value => {
console.log(value);
// "two"
});
var
p3 =
new
Promise(resolve => {setTimeout(resolve, 100,
"three"
);});
var
p4 =
new
Promise((resolve, reject) => {setTimeout(reject, 500,
"four"
);});
Promise.race([p3, p4])
.then((value) => {
console.log(value);
// "three"
})
.
catch
(err => {
// 未被调用
});
var
p5 =
new
Promise(resolve => {setTimeout(resolve, 500,
"five"
);});
var
p6 =
new
Promise((resolve, reject) => {
setTimeout(reject, 100,
"six"
);
});
Promise.race([p5, p6])
.then((value) => {
// 未被调用
}).
catch
((reason) => {
console.log(reason);
// "six"
});
Promise.resolve(value)
-
语法
1
2
3
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);
Promise.resolve等价于下面的写法。
1
2
3
Promise.resolve(value) ;
// 等价于
new
Promise(resolve => resolve(value));
-
含义
返回一个状态由给定value决定的Promise实例。 -
用法
(1) 如果该值是一个Promise对象,则直接返回该对象;1
2
3
const p =
new
Promise((resolve) => {resolve()});
const p2 = Promise.resolve(p);
console.log(p === p2);
//true
(2) 如果参数是thenable对象(即带有then方法的对象),则返回的Promise对象的最终状态由then方法的执行决定;
1
2
3
4
5
6
7
8
9
const thenable = {
then(resolve, reject) {
resolve(42);
}
};
Promise.resolve(thenable)
.then((value) => {
console.log(value);
// 42
});
(3) 如果参数是不具有then方法的对象或基本数据类型,则返回的Promise对象的状态为fulfilled,并且将该参数传递给then方法。
1
2
3
4
Promise.resolve(
'Hello'
)
.then((s) => {
console.log(s);
//Hello
});
(4) 如果不带有任何参数,则返回的Promise对象的状态为fulfilled,并且将undefined作为参数传递给then方法。
1
2
3
4
Promise.resolve()
.then((s) => {
console.log(s);
//undefined
});
-
通常而言,如果你不知道一个值是否是Promise对象,使用Promise.resolve(value)来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
-
立即resolve的Promise对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。
1
2
3
4
5
6
7
8
9
10
11
12
setTimeout(
function
() {
console.log(
'three'
);
}, 0);
Promise.resolve().then( () => {
console.log(
'two'
);
});
console.log(
'one'
);
// one
// two
// three
Promise.reject(reason)
-
语法
1
Promise.reject(reason);
Promise.reject等价于下面的写法。
1
2
3
var
p = Promise.reject(reason);
// 等同于
var
p =
new
Promise((resolve, reject) => reject(reason));
-
含义
返回一个状态为rejected的Promise对象,并将给定的失败信息传递给对应的处理方法。
注意:Promise.resolve(value)方法返回的Promise实例的状态由value决定,可能是fulfilled,也可能是rejected。Promise.reject(reason)方法返回的Promise实例的状态一定是rejected。
-
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
Promise.reject(
"Testing static reject"
)
.then((value) => {
// 未被调用
}).
catch
((reason) => {
console.log(reason);
// Testing static reject
});
Promise.reject(
new
Error(
"fail"
))
.then((value) => {
// 未被调用
}).
catch
((error) => {
console.log(error);
// Error: fail
});
-
Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const thenable = {
then(resolve) {
resolve(
'ok'
);
}
};
Promise.resolve(thenable)
.then(e => {
console.log(e ===
'ok'
);
//true
});
Promise.reject(thenable)
.
catch
(e => {
console.log(e === thenable);
// true
});