前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决异步的方式发展

解决异步的方式发展

作者头像
张宗伟 plus
发布2022-10-28 13:35:19
2450
发布2022-10-28 13:35:19
举报
文章被收录于专栏:张宗伟 plus张宗伟 plus

对于解决异步的诸多方式,只是在处理异步问题上更加直观,并没有改变js是单线程语言,以及event loop的运行机制

promise

这里不会具体讲promise的用法,只记录自己感觉重要的地方

1. 注意事项

1.1 使用promise封装异步函数的时候,resolve和reject是在回调函数里面执行的。

1.2 当一个promise对象返回一个promise对象时,后面的then会作为这个返回的promise对象的第一个then处理。看代码:

代码语言:javascript
复制
promise.then(res => {
   console.log(res)
   return new Promise((resolve,reject) => {...})
        }).then(res => {
           // 这个res就是上一个then中返回的promise对象的resolve的值
           // ...
         })

2. 重要的API

2.1 Promise.all:将所有指定的promise都执行完,再进行下一步操作。看代码:

代码语言:javascript
复制
  // promise1,promise2是传入的promise对象,是以数组的形式
  Promise.all([promise1,promise2]).then(res => {
    // res是一个数组,按顺序包含传入promise对象的resolve值
    console.log(res[0])
    console.log(res[1])
  })

2.2 Promise.race:对于指定的promise对象,只要其中有一个完成了,就执行下一步。看代码:

代码语言:javascript
复制
Promise.race([promise3,promise4]).then(res => {
  // res是最先完成的promise对象的resolve值
   console.log(res)
 })

2.3 Promise.resolve:将thenable对象转换为Promise对象,看代码:

代码语言:javascript
复制
 // 什么是 thenable 对象呢?
const thenable = {
// 就是拥有 then 属性,且属性值是如下格式的函数的对象
  then: (resolve,reject) => {
     if (success) {
        resolve(...)  
      } else {
        reject(...)
      }
    }
 }
  // 变为promise对象
let thenPromise = Promise.resolve(thenable)
thenPromise.then(res => {...})

3. 所遵循的Promise/A+规范

这是由 CommonJS 组织制定的异步模式编程规范,promise功能的实现就是根据它来实现的

3.1 一个promise对象只有三种状态:等待pendingfulfilled已完成已失败rejected。状态的转换只能是:pending ---> fulfilled / pending ---> rejected

3.2 then必须返回一个promise对象(这样才能实现链式调用啊!),接受两个参数,第一个是成功时的回调,第二个是失败时的回调(对于失败的回调不常用,一般用catch代替)

Generator

其实Generator并不是用来处理异步问题的,只不过使其与异步产生关联而已

1. Generator简介

1.1 Generator函数执行时,并不是立即执行函数内部的代码,而是返回一个对象(iterator对象)

1.2 执行过程是:调用next方法,会一直执行下去,直到遇到yield或者return,然后执行yield或者return后面的表达式,并且都有返回值:对于遇到yield是{value: ..., done: false},对于return是{value: ..., done: true}

2. Iterator遍历器对象

2.1 Iterator对象是一个指针对象,实现类似于单项链表的数据结构,通过next()将指针指向下一个节点

2.2 具有[Symbol.iterator]属性的对象可以生成iterator对象(见如下代码),从而可以使用for...of或者next()方法取值。原生具有[Symbol.iterator]属性的数据结构有:Array、like-Array(类数组对象)、Set、Map

代码语言:javascript
复制
let arr = [1,2,3]
// 生成iterator对象
// 可以看出对象[Symbol.iterator]属性返回的是一个函数
let iterArr = arr[Symbol.iterator]()

3. Generator注意事项

3.1 yield*后可跟一个Generator对象,并且会把它其中的yield按照规则来一步一步执行。当有多个Generator串联使用的时候,可以使用yield*

4. Thunk函数

4.1 只有一个参数的函数,而且这个参数是一个callback函数,这样的函数就是Thunk函数。看代码:

代码语言:javascript
复制
// 这是一个读取文件的函数,有三个参数
function readFile(filename,'utf-8',(err,data) => {...})
// Thunk化
const thunk = function(filename,codeType) {
return function(callback) {
    readFile(path,codeType,callback)
  }
 }
// readFileThunk就是一个Thunk函数
const readFileThunk = thunk('test.json','utf-8')

5. 结合Thunk函数和Generator函数

上面说过Generator函数本身与异步没啥关系,但是要是将Thunk函数与Generator结合起来,就可以用来处理异步了,传入Thunk函数的callback,正好可以作为异步函数的回调

1. 手动执行,看代码:

代码语言:javascript
复制
  function* G() {
       const res = yield thunk('test.json','utf-8')
       console.log('res: ',res)
     }


     const g = G()
     g.next().value((err,data) => {
       g.next(data)
     })

2. 自动执行,看代码:

代码语言:javascript
复制
 // 上面只是进行一个thunk函数的操作,若遇到多个,那又要嵌套着写,很麻烦
     // 于是自执行函数出现了
     function autoGenerator(G) {
       // 生成iterator对象
       const g = G()
       function next(err,data) {
         const res = g.next(data)
         if (res.done) {
           // 如果执行完就return
           return
         }
         res.value(next)
       }
       // 先自执行一次,启动iterator
       next()
     }

async-await

Generator的语法糖,更加易读!

1. function* ---> async function、yield ---> await。看代码:

代码语言:javascript
复制
  async function asyncFun() {
     const res1 = await new Promise(...)
     const res2 = await new Promise(...)
     console.log('res1: ',res1)
     console.log('res2: ',res2)
     return 'done'
   }

2. async函数返回promise,then后取到的值就是done

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张宗伟 plus 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档