js中如何顺序执行异步任务

最新推荐文章于 2024-10-09 22:54:34 发布
最新推荐文章于 2024-10-09 22:54:34 发布
阅读量6k 收藏 10
点赞数 2
分类专栏： js 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_monkey_/article/details/128247070
版权
本文介绍了JavaScript中处理异步任务的常见方法，从回调函数到Promise，再到generator和async/await。详细讲解了Promise的实现原理和A+测试，以及generator和async/await的基本使用和异步任务的顺序执行。
摘要由CSDN通过智能技术生成

在js中，任务可分为两种，同步任务和异步任务。

(1) 同步任务

又叫 非耗时任务，指的是在主线程排队执行的那些任务
只有前一个任务执行完毕，才能执行后一个任务

(2) 异步任务

又叫 耗时任务，异步任务由JavaScript委托给宿主环境进行执行
当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数
当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

现有a、b和c三个任务，如果其为同步任务，可以很简单地顺序执行，但如果其为异步任务，该如何顺序执行呢？

一、回调函数

function thing(thingName, callback) {
    setTimeout(() => {
        console.log(`执行${thingName}任务`)
        typeof callback === 'function' && callback()
    }, 1000)
}

// 执行a任务
// 执行b任务
// 执行c任务
thing('a', () => {
    thing('b', () => {
        thing('c')
    })
})

优点：简单、方便、实用

缺点：回调函数层层嵌套，不易于阅读和维护，形成回调地狱。

二、promise

1. 使用方式

基本使用

new Promise ((resolve, reject) => {
  // 执行代码
}).then(() => {
  // 期约兑现
}).catch(() => {
  // 期约拒绝
})

详细使用戳这里

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#%E7%A4%BA%E4%BE%8B

2. 异步任务顺序执行

function thing(thingName) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`执行${thingName}任务`)
            resolve()
        }, 1000)
    })
}

// 执行a任务
// 执行b任务
// 执行c任务
thing('a')
    .then(() => thing('b'))
    .then(() => thing('c'))

3. 实现原理

那么如何实现一个promise呢？实现promise之前，先分析下promise的结构

  1. promise存在三个状态，pending 待定, fulfilled 兑现, rejected 拒绝，因此需要

    （1）定义三个常量 PENDING、FULFILLED、REJECTED 对应三种状态

    （2）定义 status 表示期约当前状态

    （3）定义 value 表示已兑现期约值、定义 reason 表示已拒绝期约原因

  2. 在调用promise的实例函数时，我们传入了一个执行器，执行器接收两个函数，其作用分别为将待定期约转化为已兑现期约与已拒绝期约。因此需要定义两个函数 resolve 和 reject

  3. 已兑现期约、已拒绝期约处理函数 then

    已拒绝期约处理函数 catch

    最终执行函数 finally

  4. 静态函数 resolve、reject、 all 及 race 的实现

代码实现基于以下链接调整

https://juejin.cn/post/6945319439772434469#heading-30

3.1 promise简易实现
// MyPromise.js

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  // 期约状态, 初始值为pending
  status = PENDING
  // 已兑现期约值
  value = null
  // 已拒绝期约原因
  reason = null

  constructor(executor){
    executor(this.resolve, this.reject)
  }

  // 将待定期约转化为已兑现期约
  resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED
      this.value = value
    }
  }

  // 将待定期约转化为已拒绝期约
  reject = (reason) => {
    if (this.status === PENDING) {
      this.status = REJECTED
      this.reason = reason
    }
  }

  then (onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    } else if (this.status === REJECTED) {
      onRejected(this.reason)
    }
  }
}

module.exports = MyPromise

同目录下新建 test.js 文件用于测试

// test.js

// 引入我们的 MyPromise.js
const MyPromise = require('./MyPromise')
const promise1 = new MyPromise((resolve, reject) => {
   resolve('resolve')
})

const promise2 = new MyPromise((resolve, reject) => {
    reject('reject')
})

promise1.then(value => {
  console.log('promise1 then', value)
}, reason => {
  console.log('promise1 catch', reason)
})

promise2.then(value => {
    console.log('promise2 then', value)
  }, reason => {
    console.log('promise2 catch', reason)
  })

// 执行结果
// promise1 then resolve
// promise2 catch reject
3.2 加入异步逻辑

继续测试，发现异步执行resolve函数时，会存在问题。因此，我们需对异步逻辑进行处理。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
   setTimeout(() => resolve('resolve'), 0)
})

promise.then(value => {
    console.log('promise then', value)
  }, reason => {
    console.log('promise catch', reason)
  })

// 期望输出 promise then resolve
// 实际无输出

(1) 缓存兑现与拒绝回调

// 存储兑现回调函数
onFulfilledCallback = null
// 存储拒绝回调函数
onRejectedCallback = null

(2) then 方法中新增待定期约处理

then (onFulfilled, onRejected) {
  if (this.status === FULFILLED) {
    onFulfilled(this.value)
  } else if (this.status === REJECTED) {
    onRejected(this.reason)
  }  else if (this.status === PENDING) {
    this.onFulfilledCallback = onFulfilled
    this.onRejectedCallback = onRejected
  }
}

(3) resolve 与 reject 中调用回调函数

  // 将待定期约转化为已兑现期约
  resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED
      this.value = value
      // 兑现回调函数存在则执行
      this.onFulfilledCallback && this.onFulfilledCallback(value)
    }
  }

  // 将待定期约转化为已拒绝期约
  reject = (reason) => {
    if (this.status === PENDING) {
      this.status = REJECTED
      this.reason = reason
      // 拒绝回调函数存在则执行
      this.onRejectedCallback && this.onRejectedCallback(reason)
    }
  }

使用以下代码再次验证，异步问题解决。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
   setTimeout(() => resolve('resolve'), 0)
})

promise.then(value => {
    console.log('promise then', value)
  }, reason => {
    console.log('promise catch', reason)
  })

// 执行结果: promise then resolve
3.3 实现 then 方法多次调用添加多个处理函数

Promise支持添加多个处理函数，来测试下自定义Promise是否满足。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000) 
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
})
 
promise.then(value => {
  console.log(2)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value)
})

// 3
// resolve success

经测试，自定义Promise并不能添加多个处理函数，继续修改。

(1) 新增兑现与拒绝回调数组

// 存储兑现回调函数数组
onFulfilledCallbacks = []
// 存储拒绝回调函数数组
onRejectedCallbacks = []

(2) then方法中存储回调

then (onFulfilled, onRejected) {
  if (this.status === FULFILLED) {
    onFulfilled(this.value)
  } else if (this.status === REJECTED) {
    onRejected(this.reason)
  }  else if (this.status === PENDING) {
    this.onFulfilledCallbacks.push(onFulfilled)
    this.onRejectedCallbacks.push(onRejected)
  }
}

(3) resolve 与 reject 中循环调用回调函数

// 将待定期约转化为已兑现期约
resolve = (value) => {
  if (this.status === PENDING) {
    this.status = FULFILLED
    this.value = value
    // 兑现回调函数存在则执行
    while (this.onFulfilledCallbacks.length) {
      // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
      this.onFulfilledCallbacks.shift()(value)
    }
  }
}

// 将待定期约转化为已拒绝期约
reject = (reason) => {
  if (this.status === PENDING) {
    this.status = REJECTED
    this.reason = reason
    // 拒绝回调函数存在则执行
    while (this.onRejectedCallbacks.length) {
      // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
      this.onRejectedCallbacks.shift()(reason)
    }
  }
}

再次测试，问题解决。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000) 
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
})
 
promise.then(value => {
  console.log(2)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value)
})

// 1
// resolve success
// 2
// resolve success
// 3
// resolve success
3.4 实现then方法的链式调用

promise是支持链式调用的，我们用自定义的promise来测试下，看是否满足。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  // 目前这里只处理同步的问题
  resolve('success')
})

function other () {
  return new MyPromise((resolve, reject) =>{
    resolve('other')
  })
}
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return other()
}).then(value => {
  console.log(2)
  console.log('resolve', value)
  
// TypeError: Cannot read property 'then' of undefined

可以看到，第一个then函数的返回值为undefined，不能链式调用。继续修改

class MyPromise {
	......

  then (onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        const x = onFulfilled(this.value)
        // 传入 resolvePromise 集中处理
        resolvePromise(x, resolve, reject)
      } else if (this.status === REJECTED) {
        onRejected(this.reason)
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })

    return promise2
  }
}

function resolvePromise(x, resolve, reject) {
  // 判断x是不是 MyPromise 实例对象
  if(x instanceof MyPromise) {
    // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 普通值
    resolve(x)
  }
}

测试，完成链式调用。

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  // 目前这里只处理同步的问题
  resolve('success')
})

function other () {
  return new MyPromise((resolve, reject) =>{
    resolve('other')
  })
}
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return other()
}).then(value => {
  console.log(2)
  console.log('resolve', value)
})

// 1
// resolve success
// 2
// resolve other
3.5 then 方法链式调用识别 Promise 是否返回自己

如果 then 方法返回的是自己的 Promise 对象，则会发生循环调用，这个时候程序会报错，原生Promise测试如下

// test.js

const promise = new Promise((resolve, reject) => {
    resolve(100)
  })

const p1 = promise.then(value => {
    console.log(value)
    return p1
})

// 100
// UnhandledPromiseRejectionWarning: TypeError: Chaining cycle detected for promise #<Promise>

在 MyPromise 实现一下

// MyPromise.js

class MyPromise {
  ......
  then (onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        const x = onFulfilled(this.value)
        // 传入 resolvePromise 集中处理
        resolvePromise(promise2, x, resolve, reject)
      } else if (this.status === REJECTED) {
        onRejected(this.reason)
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })

    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }

  // 判断x是不是 MyPromise 实例对象
  if(x instanceof MyPromise) {
    // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 普通值
    resolve(x)
  }
}

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    resolve('success')
})
 
const p1 = promise.then(value => {
   console.log('resolve', value)
   return p1
})

运行一下，结果报错了。从错误提示可以看出，我们必须要等 p1 完成初始化。这里就需要创建一个异步函数去等待 p1 完成初始化，此处使用微任务 --> queueMicrotask

image.png

修改并执行

// MyPromise.js

class MyPromise {
  ......

	then (onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        queueMicrotask(() => {
          const x = onFulfilled(this.value)
          // 传入 resolvePromise 集中处理
          resolvePromise(promise2, x, resolve, reject)
        })
      } else if (this.status === REJECTED) {
        onRejected(this.reason)
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })

    return promise2
  }
}

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    resolve('success')
})
 
const p1 = promise.then(value => {
   console.log('resolve1', value)
   return p1
})
 
// 运行的时候会走reject
p1.then(value => {
  console.log('resolve2', value)
}, reason => {
  console.log('reject')
  console.log(reason.message)
})

// 执行结果
// resolve1 success
// reject
// Chaining cycle detected for promise #<Promise>
3.6 错误处理

(1) 捕获执行器错误

// MyPromise.js

class MyPromise {
  ......

	constructor(executor){
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      // 如果有错误，就直接执行 reject
      this.reject(error)
    }
  }
}

测试一下

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    // resolve('success')
    throw new Error('执行器错误')
})

// 2
// 执行器错误
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
}, reason => {
  console.log(2)
  console.log(reason.message)
})

测试通过。

(2) then 执行的时错误捕获

// MyPromise.js

class MyPromise {
  ......

	then (onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        try {
          queueMicrotask(() => {
            const x = onFulfilled(this.value)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          })
        }  catch (error) {
          reject(error)
        }  
      } else if (this.status === REJECTED) {
        onRejected(this.reason)
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })

    return promise2
  }
}

测试一下

// test.js

const MyPromise = require('./MyPromise')

const promise = new MyPromise((resolve, reject) => {
    resolve('success')
 })
 
//  1
//  resolve success
//  4
//  then error
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  throw new Error('then error')
}, reason => {
  console.log(2)
  console.log(reason.message)
}).then(value => {
  console.log(3)
  console.log(value)
}, reason => {
  console.log(4)
  console.log(reason.message)
})

测试通过。

3.7 rejected及pending状态改造
  1. 增加异步状态下的链式调用
  2. 增加回调函数执行结果的判断
  3. 增加识别 Promise 是否返回自己
  4. 增加错误捕获
// MyPromise.js

class MyPromise {
  ......

then (onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      const fulfilledMicrotask = () =>  {
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 获取成功回调函数的执行结果
            const x = onFulfilled(this.value)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        })  
      }
  
      const rejectedMicrotask = () => { 
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 调用失败回调，并且把原因返回
            const x = onRejected(this.reason)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        }) 
      }

      if (this.status === FULFILLED) {
        fulfilledMicrotask()
      } else if (this.status === REJECTED) {
        rejectedMicrotask()
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(fulfilledMicrotask)
        this.onRejectedCallbacks.push(rejectedMicrotask)
      }
    })

    return promise2
  }
}
3.8 then 中的参数变为可选

上面我们处理 then 方法的时候都是默认传入 onFulfilled、onRejected 两个回调函数，但是实际上原生 Promise 是可以选择参数的单传或者不传，都不会影响执行。

例如下面这种 👇

// test.js

const promise = new Promise((resolve, reject) => {
  resolve(100)
})

promise
  .then()
  .then()
  .then()
  .then(value => console.log(value))

// 输出 100

所以我们需要对 then 方法做一点小小的调整

// MyPromise.js

class MyPromise {
  ......

	then (onFulfilled, onRejected) {
    // 如果不传，就使用默认函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

    const promise2 = new MyPromise((resolve, reject) => {
      const fulfilledMicrotask = () =>  {
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 获取成功回调函数的执行结果
            const x = onFulfilled(this.value)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        })  
      }
  
      const rejectedMicrotask = () => { 
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 调用失败回调，并且把原因返回
            const x = onRejected(this.reason)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        }) 
      }

      if (this.status === FULFILLED) {
        fulfilledMicrotask()
      } else if (this.status === REJECTED) {
        rejectedMicrotask()
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(fulfilledMicrotask)
        this.onRejectedCallbacks.push(rejectedMicrotask)
      }
    })

    return promise2
  }
}

改造完自然是需要验证一下的

先看情况一：resolve 之后

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  resolve('succ')
})
 
promise.then().then().then(value => console.log(value))

// 打印 succ

再看情况二：reject 之后

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  reject('err')
})
 
promise.then().then().then(value => console.log(value), reason => console.log(reason))

// 打印 err
3.9 catch、finally函数实现

(1) catch 其实是个语法糖，可以通过then函数传入第二个参数实现

(2) finally 的特点如下

无论promise成功或失败，finally方法都会执行接收到的回调函数，并返回一个promise实例：
a. 如果回调函数执行出错，将以抛出的错误，拒绝新的promise；
b. 否则，新返回的promise会沿用旧promise的决议值进行决议。

// MyPromise.js

class MyPromise {
  ......

  catch (onRejected) {
    return this.then(null, onRejected)
  }

  // 无论promise成功或失败，finally方法都会执行接收到的回调函数，并返回一个promise实例：
  // 1. 如果回调函数执行出错，将以抛出的错误，拒绝新的promise；
  // 2. 否则，新返回的promise会沿用旧promise的决议值进行决议。
  finally (callback) {
    return this.then(
      (data) => {
        callback()
        return data
      },
      (error) => {
        callback()
        throw error
      }
    )
  }
}
3.10 静态函数实现

(1) resolve

  static resolve (parameter) {
    // 如果传入 MyPromise 就直接返回
    if (parameter instanceof MyPromise) {
      return parameter
    }

    return new MyPromise(resolve =>  {
      resolve(parameter)
    })
  }

(2) reject

// MyPromise.js

class MyPromise {
  ......

  static reject (reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }
}

(3) all

// MyPromise.js

class MyPromise {
  ......

  static all (promiseArray) {
    let result = []
    let success = 0

    return new Promise((resolve, reject) => {
      promiseArray.forEach((promise, i) => {
        MyPromise.resolve(promise)
          .then(res => {
            result[i] = res
            success++

            // 全部成功
            if (success === promiseArray.length) {
              resolve(result)
            }
          }, err => reject(err))
      })
    }) 
  }
}

(4) race

// MyPromise.js

class MyPromise {
  ......

  static race (promiseArray) {
    return new Promise((resolve, reject) => {
      promiseArray.forEach((promise) => {
        MyPromise.resolve(promise)
          .then(res => {
              resolve(res)
          }, err => reject(err))
      })
    }) 
  }
}

验证一下，木有问题

// test.js

const MyPromise = require('./MyPromise')

// resolve success
MyPromise
  .resolve('success')
  .then((res) => {
    console.log('resolve', res)
  })

// reject fail
MyPromise
  .reject('fail')
  .then(() => {}, err => {
    console.log('reject', err)
  })

// all [ 'a', 'b', 'c' ]
MyPromise
  .all([thing('a', 1000), thing('b', 2000), thing('c', 3000)])
  .then(res => console.log('all', res))

// race a
MyPromise
  .race([thing('a', 1000), thing('b', 2000), thing('c', 3000)])
  .then(res => console.log('race', res))


function thing (thingName, timeout) {
  return new MyPromise(
    resolve => setTimeout(() => {
      resolve(thingName)
    }, timeout)
  )
}
3.11 最终代码
// MyPromise.js

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  // 期约状态, 初始值为pending
  status = PENDING
  // 已兑现期约值
  value = null
  // 已拒绝期约原因
  reason = null

  // 存储兑现回调函数数组
  onFulfilledCallbacks = []
  // 存储拒绝回调函数数组
  onRejectedCallbacks = []

  constructor(executor){
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      // 如果有错误，就直接执行 reject
      this.reject(error)
    }
  }

  // resolve 静态方法
  static resolve (parameter) {
    // 如果传入 MyPromise 就直接返回
    if (parameter instanceof MyPromise) {
      return parameter
    }

    return new MyPromise(resolve =>  {
      resolve(parameter)
    })
  }

  // reject 静态方法
  static reject (reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

  static all (promiseArray) {
    let result = []
    let success = 0

    return new Promise((resolve, reject) => {
      promiseArray.forEach((promise, i) => {
        MyPromise.resolve(promise)
          .then(res => {
            result[i] = res
            success++

            // 全部成功
            if (success === promiseArray.length) {
              resolve(result)
            }
          }, err => reject(err))
      })
    }) 
  }

  static race (promiseArray) {
    return new Promise((resolve, reject) => {
      promiseArray.forEach((promise) => {
        MyPromise.resolve(promise)
          .then(res => {
              resolve(res)
          }, err => reject(err))
      })
    }) 
  }

  // 将待定期约转化为已兑现期约
  resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED
      this.value = value
      // 兑现回调函数存在则执行
      while (this.onFulfilledCallbacks.length) {
        // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
        this.onFulfilledCallbacks.shift()(value)
      }
    }
  }

  // 将待定期约转化为已拒绝期约
  reject = (reason) => {
    if (this.status === PENDING) {
      this.status = REJECTED
      this.reason = reason
      // 拒绝回调函数存在则执行
      while (this.onRejectedCallbacks.length) {
        // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
        this.onRejectedCallbacks.shift()(reason)
      }
    }
  }

  then (onFulfilled, onRejected) {
    // 如果不传，就使用默认函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

    const promise2 = new MyPromise((resolve, reject) => {
      const fulfilledMicrotask = () =>  {
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 获取成功回调函数的执行结果
            const x = onFulfilled(this.value)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        })  
      }
  
      const rejectedMicrotask = () => { 
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          try {
            // 调用失败回调，并且把原因返回
            const x = onRejected(this.reason)
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          } 
        }) 
      }

      if (this.status === FULFILLED) {
        fulfilledMicrotask()
      } else if (this.status === REJECTED) {
        rejectedMicrotask()
      }  else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(fulfilledMicrotask)
        this.onRejectedCallbacks.push(rejectedMicrotask)
      }
    })

    return promise2
  }

  catch (onRejected) {
    return this.then(undefined, onRejected)
  }

  finally (finalFunc) {
    return this.then(finalFunc, finalFunc)
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }

  // 判断x是不是 MyPromise 实例对象
  if(x instanceof MyPromise) {
    // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 普通值
    resolve(x)
  }
}

module.exports = MyPromise

4. Promise A+ 测试

4.1 测试

检验一份手写 Promise 靠不靠谱，通过 Promise A+ 规范自然是基本要求，这里我们可以借助 promises-aplus-tests 来检测我们的代码是否符合规范。

(1) 新建test文件夹

(2) 命令行输入以下代码快速初始化

npm init -y

(3) 安装包

npm install promises-aplus-tests -D

(4) 将 MyPromise.js 拷贝至test文件夹，并添加 deferred 函数

// MyPromise.js

......

MyPromise.deferred = function () {
  const result = {}
  result.promise = new MyPromise(function (resolve, reject) {
    result.resolve = resolve
    result.reject = reject
  })

  return result
}

module.exports = MyPromise

(5) 配置启动命令

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "promises-aplus-tests MyPromise"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "promises-aplus-tests": "^2.1.2"
  }
}

(6) 命令行输入以下代码执行

node run test
4.2 修改

执行结果如图

image.png

image.png

可以看出是2.3.x的问题，翻看了一下 Promise A+ 规范，找到以下信息。

Promise A+ 规范链接：https://promisesaplus.com/#point-59image.png

翻译如下

2.3.3 否则如果 x 是一个对象或函数，

​ 2.3.3.1 将x.then赋值给then

​ 2.3.3.2 如果取 x.then 的值时抛出错误 e，则以 e为由拒绝 promise。

​ 2.3.3.3 如果then是一个函数，执行并将其this指向x，第一个入参为resolvePromise，第二个入参为rejectPromise

​ 2.3.3.3.1 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)

​ 2.3.3.3.2 如果 rejectPromise以r 为参数被调用，则以r为由拒绝promise

​ 2.3.3.3.3 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用

​ 2.3.3.3.4 如果then执行时抛出异常

​ 2.3.3.3.4.1 如果resolvePromise 或 rejectPromise 被调用，则忽略它

​ 2.3.3.3.4.2 否则，以e为由拒绝promise

​ 2.3.3.4 如果then不是一个函数，则以x为值兑现promise

2.3.4 如果x不是一个对象或函数，则以x为值兑现promise

代码修改如下

function resolvePromise(promise, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (promise === x) {
    return reject(new TypeError('The promise and the return value are the same'))
  }

  if (typeof x === 'object' || typeof x === 'function') {
    // x 为 null 直接返回，走后面的逻辑会报错
    if (x === null) {
      return resolve(x)
    }

    let then
    try {
      // 把 x.then 赋值给 then 
      then = x.then
    } catch (error) {
      // 如果取 x.then 的值时抛出错误 error ，则以 error 为据因拒绝 promise
      return reject(error)
    }

    // 如果 then 是函数
    if (typeof then === 'function') {
      let called = false
      try {
        then.call(
          x, // this 指向 x
          // 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
          y => {
            // 如果 resolvePromise 和 rejectPromise 均被调用，
            // 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
            // 实现这条需要前面加一个变量 called
            if (called) return
            called = true
            resolvePromise(promise, y, resolve, reject)
          },
          // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
          r => {
            if (called) return
            called = true
            reject(r)
          })
      } catch (error) {
        // 如果调用 then 方法抛出了异常 error：
        // 如果 resolvePromise 或 rejectPromise 已经被调用，直接返回
        if (called) return

        // 否则以 error 为据因拒绝 promise
        reject(error)
      }
    } else {
      // 如果 then 不是函数，以 x 为参数执行 promise
      resolve(x)
    }
  } else {
    // 如果 x 不为对象或者函数，以 x 为参数执行 promise
    resolve(x)
  }
}

再次执行，完美解决。

image.png

三、generator

generator函数，即生成器函数，是一个状态机，封装了多个内部状态。执行一个generator，会返回一个迭代器对象，通过迭代器对象，可以遍历generator函数内部的每个状态。因此，generator函数可以看做是一个迭代器生成器。

1. 基本使用

(1) generator基本形式

generator 函数是在 function 和函数名之间添加 * 来定义的。yield关键字可以让生成器停止和开始执行，生成器函数在遇到yield关键字之前会正常执行。遇到这个关键字之后，执行会停止，函数作用域的状态会被保留。停止执行的生成器函数可通过next()方法来恢复执行。

function *foo() {
    yield 1
    yield 2
    yield 3
    return 4
}

(2) 执行foo得到一个迭代器

const iterator = foo()

(3) 迭代器遍历

可以通过常用迭代器遍历方法如for-of来遍历迭代器

// 1
// 2
// 3
for(let item of iterator){
    console.log(item)
}

也可以手动进行遍历

// 1
// 2
// 3
let item = iterator.next()
while (!item.done) {
    console.log(item.value)
    item = iterator.next()
}

2. 异步任务顺序执行

function thing(thingName) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`执行${thingName}任务`)
            resolve()
        }, 1000)
    })
}

function *generator() {
    yield thing('a')
    yield thing('b')
    yield thing('c')
}

function dothings (generator) {
    const thingIterator = generator()
    let thingItem
    exec()

    function exec () {
        thingItem = thingIterator.next()
        if (!thingItem.done) {
            Promise.resolve(thingItem.value).then(exec)
        }
    }
}

// 执行a任务
// 执行b任务
// 执行c任务
dothings(generator)

四、async/await

1. 实现原理

1）async/await 就是 generator 的语法糖，使得异步操作变得更加方便
2）async 函数就是将 generator 函数的星号（*）替换成 async，将 yield 替换成await

async function thing(thingName) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`执行${thingName}任务`)
            resolve()
        }, 1000)
    })
}

// generator 生成器函数
function myAsync (generator) {
    return function () {
        const iterator = generator()
        let item

        return new Promise ((resolve, reject) => exec(resolve, reject))

        function exec (resolve, reject) {
            item = iterator.next()

            if (!item.done) {
               Promise.resolve(item.value).then(() => exec(resolve, reject))
            } else {
                // 返回值处理
                if (item.value instanceof Promise) {
                    item.value.then(resolve, reject)
                } else {
                    resolve(item.value)
                }
            }
        }
    }
}

function *generator() {
    yield thing('a')
    yield thing('b')
    yield thing('c')

    return 'the end'
}

// 模拟定义一个async函数
const myAsyncFunc = myAsync(generator)
// 执行a任务
// 执行b任务
// 执行c任务
const result = myAsyncFunc()

// 返回为一个promise对象
console.log(result instanceof Promise) // true
// the end
result.then(res => console.log(res))

2. 使用注意事项

1）await 后面的promise对象，当其为一个已拒绝期约时，会阻塞后面代码的执行，举例如下

// the first
// UnhandledPromiseRejectionWarning: undefined
async function test () { 
    console.log('the first')
    await Promise.reject()
    console.log('the second')
}

test()

对此，可以使用catch函数或try-catch进行处理

catch函数

// the first
// the second
async function test () { 
    console.log('the first')
    await Promise.reject().catch(() => {})
    console.log('the second')
}

test()

try-catch

// the first
// the second
async function test () { 
    console.log('the first')
    try {
        await Promise.reject()
    } catch (e) {

    }
    console.log('the second')
}

test()

2）多个await后面的异步操作，如果不存在继发关系，最好让它们同时触发

3）await仅能在async函数中使用

4）async函数返回值为一个promise对象

3. 异步任务顺序执行

a、b、c异步任务顺序执行代码如下：

async function thing(thingName) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(`执行${thingName}任务`)
            resolve()
        }, 1000)
    })
}

async function dothings () {
    await thing('a')
    await thing('b')
    await thing('c')
}

// 执行a任务
// 执行b任务
// 执行c任务
dothings()
Programing_Monkey
关注
专栏目录
JS 如何顺序执行多个异步任务？
weixin_63490373的博客
11-21 1079
在 JS 中可以使用 Promise 和 async/await 来顺序执行异步任务。生成器（Generator）确实是一种特殊的函数，其函数体内可以使用。使用 Promise 通过 then() 方法的链式调用来实现。使用 async/await 可以将异步任务看做同步人物来执行。生成器函数的调用返回一个迭代器对象，该迭代器对象可以通过调用。暂停函数的执行，将一个值传递给生成器的调用者。方法来依次获取生成器函数中使用。表示生成器函数是否已经执行完成。声明，并且在函数体内可以通过。
JS多个异步请求 按顺序执行next实现解析
12-13
在js里面，偶尔会遇见需要多个异步按照顺序执行请求，又不想多层嵌套，，这里和promise.all的区别在于，promise或者Jquery里面的$.when 是同时发送多个请求，一起返回，发出去的顺序是一起；这里是按照顺序发请求 首先创建一个迭代器，接收任意多个函数参数 function nextRegister(){ var args = arguments; var count = 0; var comm = {}; function nextTime(){ count++; if(count < args
JS中的异步和Promise
最新发布
wechatonly的博客
10-09 1308
本文探讨了 JavaScript 中的异步编程，重点介绍了 Promise。由于 JavaScript 是单线程语言，长时间操作会阻塞主线程，因此引入事件循环机制以支持异步操作。文章阐述了 Promise 的三种状态（待定、已兑现、已拒绝），链式调用与错误处理，以及 async/await 语法糖的用法。还讨论了 Promise 的并发处理方法，如 Promise.all 和 Promise.race，强调微任务与宏任务的优先级。读者将全面了解 JavaScript 异步编程及 Promise 的应用。
js 异步执行顺序
weixin_34266504的博客
06-21 387
参考文章：js 异步执行顺序 1.js的执行顺序，先同步后异步 2.异步中任务队列的执行顺序： 先微任务microtask队列，再宏任务macrotask队列 3.调用Promise 中的resolve，reject属于微任务队列，setTimeout属于宏任务队列 注意以上都是 队列，先进先出。 微任务包括 `process.nextTick` ，`promis...
JavaScript基础——异步任务的执行顺序
蜡笔不新的博客
11-20 492
JavaScript的异步任务执行顺序，异步分为微任务和宏任务！
javascript的异步执行顺序---管中窥豹
黔肆的博客
08-14 808
从经典的嵌套在for循环的settimeout例子来切入，看看JS为什么会这样执行。
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
10-17
### 实现按顺序执行异步任务的方案 #### 方案1：使用Promise链式调用 Promise是解决异步操作的一种有效方式，通过链式调用可以实现异步任务的顺序执行。在第一套方案中，作者尝试使用纯Promise的方式进行任务的按...
在for循环中依次执行异步操作
01-08
思路：还是利用Promise的then()来进行链式操作，每次循环的时候往Promise后添加一个新的then(),这样就可以保证上一个数据的异步操作执行完毕再执行下一个数据的异步操作。 示例代码： const promise = Promise....
Javascript异步执行不按顺序解决方案
10-15
使用回调函数、Promise、async/await等工具，以及合理地设计程序逻辑，可以有效地管理异步任务的顺序，确保程序的正确性和可靠性。对于更复杂的异步控制流，可以利用Promise.all()来等待一组异步操作完成，或者使用...
js异步执行顺序
D321xiaoding的博客
02-26 372
将同步代码放入setTimeout中，变成异步，则和ajax中的回调同为异步，则按照异步的方式来排列执行顺序。 由此引入异步之间的执行顺序问题！ 首先常见的异步一般有：ajax可以异步也可同步、回调、setTimeout系列、事件绑定。 而es6中的新增的promise、async/await。 按照js的执行顺序，先执行同步，再执行异步。那么上面这些异步的执行之内该如何执行呢？ 首先了解一下宏...
JavaScript 中优雅的实现顺序执行异步函数
weixin_34198881的博客
04-05 1055
火于异步 1995年，当时最流行的浏览器——网景中开始运行 JavaScript （最初称为 LiveScript）。 1996年，微软发布了 JScript 兼容 JavaScript。随着网景、微软竞争而不断的技术更新，在 2000年前后，JavaScript 相关的技术基础准备就绪。 随后到 2005 年前后，以 Google 为首...
JS异步--执行顺序
su_sf99的博客
12-21 1204
当JS解析执行时，会被引擎分为两类任务：同步任务和异步任务。同步任务被推到执行栈中按顺序执行任务，而异步任务可以被执行时是被放到任务队列中等待JS引擎去执行。当栈中的所有同步任务执行完成后才会去任务队列中查看是否有任务存在，并将任务放到执行栈中去执行，执行完后再去任务队列中查看是否有可以执行的任务然后再去执行。浏览器事件循环有一个宏队列，一个微队列，且微队列在一次循环中队列中的任务一个接一个执行一直到队列为空，而宏队列只取队首的一个任务放入执行栈执行，执行过后接着执行微队列，并构成循环。
JS异步操作的执行顺序
weixin_43741546的博客
07-29 999
异步操作的执行顺序 今天尝试了一串代码： Promise.resolve().then(()=>{ console.log(1) }) setTimeout(()=>{console.log(2)},0) 最初的想法是，promise和settimeout同时开始，那promise中的代码执行肯定还需要时间吧，所以应该是先打印2，后打印1，但结果相反。 经过查阅一些文章之后，稍微总...
js异步执行顺序（微任务、宏任务）
weixin_43464194的博客
08-09 151
setTimeout(() => { //执行后 回调一个宏事件 console.log(‘内层宏事件3’) }, 0) console.log(‘外层宏事件1’); async function fun1() { console.log(“async1”) await fun2() console.log(“aysnc11”) } async function fun2() { console.log(“async2”) await func3() new Promise((resolve) =&g
js异步之间执行的顺序
HYJ851122的博客
08-30 417
今天同事问了一个问题，怎么让ajax中的回调（保持异步）先执行，再让普通的function执行。。。 整了个解决办法： 如下： <!DOCTYPE html> <html> <head> <title>lhy1</title> </head> <body> <scrip...
JS中含有异步操作的执行顺序
zhang1339435196的博客
08-14 2319
看下面这个简单的例子，我们将会了解到JS异步操作的体现： setTimeout(function(){ console.log(9); },0); //设置一个定时器 console.log(5); 这段代码的输出顺序是什么？ 如果你的答案是9，5.那么有点遗憾,输出顺序是5,9. Why? 在Javascript引擎线程中，存在着一个主线程和一个任务队列，同步任务会在其主线程中执行，而一...
js中 forEach循环异步任务的执行顺序
shuxiaoxii的博客
03-10 6108
forEach中 异步任务的执行顺序. 先看代码 <script> let promiseTask = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num * num); resolve(true); }, 1000)
js同步任务异步任务执行顺序
04-01
在JavaScript中，同步任务和异步任务的执行顺序是不同的。 同步任务是按照代码的顺序依次执行的，也就是说，每个任务需要等待上一个任务执行完成后才能开始执行。 异步任务是不需要等待上一个任务执行完成就可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值