- Promise
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
Promise
对象是由关键字 new
及其构造函数来创建的。构造函数会,把一个叫做“处理器函数”(executor function)的函数作为它的参数。这个“处理器函数”接受两个函数resolve
和 reject
作为其参数。当异步任务顺利完成且返回结果值时,会调用 resolve
函数,而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject
函数。
promise 状态:
- pending:初始状态,既不是成功,也不是失败状态
- fulfilled:操作成功
- rejected:操作失败
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise1.then(function(value) {
console.log(value);
});
console.log(promise1);
通过外部then() 方法来绑定成功、失败的回调函数,这个then 支持链式操作,即如果存在多个嵌套那么也就是不断的then()。
- async
async 用于申明一个 异步的function。
当调用一个 async 函数时,会返回一个 Promise 对象。根据mdn的解释,
- 当 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值。
- 当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。
如果 async 函数没有返回值,它会返回 Promise.resolve(undefined)。
在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且不会阻塞后面的语句。
Promise 对象生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
async function testAsync() {
return "hello async";
}
let data = testAsync().then( (data) => {
console.log(data) // hello async
return data
});
console.log(data);
但是一般不要在then方法里面定义reject状态的回调函数,强烈建议使用catch的方式进行处理。
promise.then(function(data) {
resolved(value);
}).catch(function(err) {
console.log(error)
});
- await
await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行async function。若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。
async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
- 假如这个表达式返回的是一个 Promise 对象, 那么它的返回值,实际上就是 Promise 的回调函数 resolve 的参数,如果这个Promise rejected 了,await 表达式会把 Promise 的异常抛出,所以最好把await命令放到try catch中进行处理。
- 假如这个表达式如果返回的是一个常量,那么会把这个常量转为Promise.resolve(xx),同理如果没有返回值也是Promise.resolve(underfind)
async 函数中可能会有 await 表达式,await表达式会使 async 函数暂停执行,直到表达式中的 Promise 解析完成后继续执行 async 中 await 后面的代码并返回解决结果。
注意, await 关键字仅仅在 async function中有效
function say() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("hello");
}, 1000);
});
}
async function demo() {
const v = await say();
console.log(v);
}
demo();