js异步使用方法：

setTimeout/setInterval

setTimeout
1
2
3
4
5
6
7
8
function fn2 (f) {
  setTimeout(() => {
    console.log('Function 2')
    f()
  }, 500)
}
 
fn2(fn3)

事件发布/订阅

AsyncFunArr（异步函数数组）
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
class AsyncFunArr {
  constructor (...arr) {
    this.funcArr = [...arr]
  }
 
  next () {
    const fn = this.funcArr.shift(); //返回头部删除第一个元素 
    if (typeof fn === 'function') fn()
  }
 
  run () {
    this.next()
  }
}
 
const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3);

asyncFunArr.run()/asyncFunArr.next(); //执行


//队列方法
function fn1 () {
  console.log('Function 1')
  asyncFunArr.next()
}
 
function fn2 () {
  setTimeout(() => {
    console.log('Function 2')
    asyncFunArr.next()
  }, 500)
}
 
function fn3 () {
  console.log('Function 3')
  asyncFunArr.next()
}

Promise

Promise概念：

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。

一个 Promise有以下几种状态:

  • pending: 初始状态，既不是成功，也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。
Promise方法：

  • Promise.all(iterable)==>这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var p1 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 500, 'P1');
    });
    var p2 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 600, 'P2');
    });
    // 同时执行p1和p2，并在它们都完成后执行then:
    Promise.all([p1, p2]).then(function (results) {
        console.log(results); // 获得一个Array: ['P1', 'P2']
    });

  • Promise.race(iterable)==>当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var p1 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 500, 'P1');
    });
    var p2 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 600, 'P2');
    });
    Promise.race([p1, p2]).then(function (result) {
        console.log(result); // 'P1' P1比P2先返回，然后就丢弃p2
    });

  • Promise.reject(reason)==>返回一个状态为失败的Promise对象

  • Promise.resolve(value)==>返回一个状态由给定value决定的Promise对象

Promise原型方法：

  • Promise.prototype.catch(onRejected)==>添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise

  • Promise.prototype.then(onFulfilled, onRejected)==>添加解决(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise, 将以回调的返回值来resolve.

    1
    job1.then(job2).then(job3).catch(handleError); //job1、job2和job3都是Promise对象。

  • Promise.prototype.finally(onFinally)==>添加一个事件处理回调于当前promise对象，并且在原promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected)

async/await

async
  • 它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
  • async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then方法。
    1
    2
    3
    4
    5
    6
    7
    async function timeout() {
        return 'hello world'
    }
    timeout().then(result => {
        console.log(result);
    })
    console.log('虽然在后面，但是我先执行');
await
  • await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 2s 之后返回双倍的值
    function doubleAfter2seconds(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num)
            }, 2000);
        } )
    }

    //2s秒 输出 2 * 30
    async function testResult() {
        let result = await doubleAfter2seconds(30);
        console.log(result);
    }

    //6s 输出 2 * 110
    async function testResult() {
        let first = await doubleAfter2seconds(30);
        let second = await doubleAfter2seconds(50);
        let third = await doubleAfter2seconds(30);
        console.log(first + second + third);
    }