es6之promise、async函数

最新推荐文章于 2024-08-27 00:42:43 发布

原创最新推荐文章于 2024-08-27 00:42:43 发布 · 569 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise #async await #module

javascript+jquery 专栏收录该内容

46 篇文章

订阅专栏

本文深入探讨Promise对象和Async/Await函数在异步编程中的应用。Promise对象用于表示异步操作，有pending、fulfilled和rejected三种状态，简化了回调函数的复杂性。Async函数标记异步操作，返回一个Promise对象，而Await关键字用于暂停执行，直到Promise被解决。通过实例展示如何使用这些特性来简化异步代码。

promise

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled(resolved)（已成功）和rejected（已失败）。

就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。then方法回调中需要获取异步操作中的值，并且依赖于promise对象的resolved或者rejected抛出的对象

const promise = new Promise(function(resolve, reject) {
  if (判断){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {//接受resolve成功状态数据
  // success
}, function(error) {//接受rejected失败状态数据
  // failure
});

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done it you want do');//异步操作，
  });
}

timeout(1000).then((value) => {
  console.log(value);
});

Promise 新建后就会立即执行。

async函数

用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。

async function asyFun() {
    return '----';
}

asyFun().then(val => {
    console.log(val);// '----'
});
若 async 定义的函数有返回值，return '----';相当于Promise.resolve('----'),没有声明式的 return则相当于执行了Promise.resolve();

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {var oldDate=new Date();var newDate=0;
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
            newDate=new Date();
            console.log(newDate-oldDate);
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000).then((value)=>{console.log(value)});
    await sleep(1000).then((value)=>{console.log(value)});
    await sleep(1000).then((value)=>{console.log(value)});
    console.log('clear the loading~');
}

bugDemo();
打印如下：
Promise {<pending>}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: undefined
VM72:4 1012
VM72:4 1004
VM72:4 1016
VM72:13 clear the loading~