ECMAScript异步编程

ECMAScript异步编程

涉及知识点：

• ECMAScript2015+
• Promise
• async/await

---

目录

---

异步编程

• node.js服务器

const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(() => {
        res.send('Hello');
    }, 3000)
});

app.listen(8080);

• 异步请求测试
  

• 异步：ajax的事情还没有处理完成的时候，我们点击div，是可以立马变色，ajax的事情并不影响当前页面中其他的效果。

• 同步：当前线程直接处理

回调地狱（callback hell）

    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        // console.log(this.responseText);
        // 假设获取到了用户信息
        if ( user.isAdmin ) {
            var xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:8080/getVideo',true);
            xhr.onload = function() {
                // 根据视频信息，当前视频的具体地址
            }
            xhr.send();
        }
    };
    //获取当前用户信息，以下是模拟的url
    xhr.open('get', 'http://localhost:8080/getUserInfo', true);
    xhr.send();

• 回调地狱的问题：不仅看起来很不舒服，可读性比较差；除此之外还有比较重要的一点就是对异常的捕获无法支持。

Promise对象

基本使用

    new Promise(function(resolve, reject) {
        // 要执行的异步任务
    })

• Promise的状态： [[PromiseStatus]]
  
  • pending：初始状态，既不是成功，也不是失败状态
  • fulfilled/resolved：意味着操作成功完成
  • rejected：意味着操作失败

• promise写法影响了书写代码的方式，并没有改变异步的本质。

• Promise状态：

  • resolve()函数：更改Promise对象为成功状态
  • reject()函数：更改Promise对象为失败状态
• then方法
  
  • 任务后续处理函数，一般情况下处理某个Promise任务完成（无论成功还是失败）的后续任务

考虑传参情况（因为考虑到局部变量的局限性）

    new Promise( (resolve, reject) => {
        // resolve, reject 这两个函数是可以传入参数的，参数将被传递给then中的函数进行使用
        setTimeout(() => {
            var a = 10;
            resolve(a);
            reject('出错了');
        }， 2000)；
    }).then( v => {
        console.log(v);
    }, err => {
        console.log(err);
    });

    .then(onFulfilled/onResolved, onRejected)
    onFulfilled/onResolved:fulfilled/resolved状态下调用
    onRejected：rejected状态下调用

Promise链

• resolve：会输出1，3

• reject：会输出2，3

• 前一个then中没有传入参数时，相当于默认传入了一个Promise对象

• 手动处理then方法，让它返回一个指定状态的Promise对象

总结上面三种情况：

解决不能中途退出的问题（catch）

catch捕获错误：

输出：登录失败，catch以后

Promise.all()

输出：

Promise.race()

谁先执行完就顺带执行了，race的一个执行了，then方法就执行。

Promise.resolve()&Promise.reject()

• Promise.reject()返回一个Rejected状态的Promise对象

• 传一个promise对象
  
  输出：错误

• 包含一个then方法的对象(遇到问题，待解决)

async&await

输出：100，200

考虑失败情况

输出：100，200，传入的值太大了