欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单理解promise,async和await

程序员文章站 2022-05-07 23:06:08
...

1.promise是什么?

1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列

异步操作的常见语法

DOM事件

document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 响应事件,进行相应的操作
}
$('#start').on('click', start)

Ajax请求

$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

// 或者在页面加载完毕后回调
$(function() {
 // 页面结构加载完成,做回调逻辑处理
})

计时器setTimeoutsetInterval

要达到无阻塞高并发异步需求

异步回调的问题:

  • 之前处理异步是通过纯粹的回调函数的形式进行处理;
  • 很容易进入到回调地狱中,剥夺了函数return的能力;
  • 稍有不慎就会踏入回调地狱 - 嵌套层次深,不好维护
  • 问题可以解决,但是难以读懂,维护困难

一般情况我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API,就会形成一个链式调用,比如为了完成一个功能,我们需要调用API1API2API3依次按照顺序进行调用,这个时候就会出现回调地狱的问题。

简单理解promise,async和await

基于Promise发送Ajax请求

<script type="text/javascript">
    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 约定处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 约定处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
    
  </script>

promise

  • promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外);
  • 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据;
  • 代码风格,容易理解,便于维护;
  • 多个异步等待合并便于解决;

2.asyncawait

async关键字声明后面是一个异步函数,函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hc8nETyE-1603895405230)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1603878480905.png)]

await(看作是个运算符)操作符它只能在异步函数 async function内部使用,用于等待一个 Promise 对象,。如果它等到的是非promise对象,那么他直接返回对应的值;如果等到的是promise,那么他会临时阻塞后续代码,直到promise对象resolve,取到 resolve 的值,将其作为运算结果返回。

async/await的优势在于处理then链,单一的Promise链并不能发现asyncawait的优势,但是如果需要处理多个Promise组成的then链的时候,优势就体现出来了,Promise通过then链来解决多层回调的问题,现在又用async/await来进一步优化它(Promsie参数传递太麻烦)。

假设一个业务,分多个步骤完成,每个步骤都是异步的,而且依赖于上一个步骤的结果。用 setTimeout 来模拟异步操作:

/**
 * 传入参数 n,表示这个函数执行的时间(毫秒)
 * 执行的结果是 n + 200,这个值将用于下一步骤
 */
function takeLongTime(n) {
    var p = new Promise(resolve => {
        setTimeout(fn(){
            resolve(n + 200)}, n);
    });
    return p;
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.39404296875 ms

如果用 async/await来实现会是这样

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1512.549072265625 ms

结果和之前的 Promise 实现是一样的,但是这个代码看起来是不是清晰得多,几乎跟同步代码一样。

相关标签: Promise