javascript 异步编程

并发

异步编程和函数式自定义组件

关于在前端开发过程中遇到有关

目录

1.1 在 JavaScript 中并发和异步编程

• 什么是并发和异步编程
• callback(回调函数)
• promise
• iterator (迭代器)
• generator (生成器)
• async/wait
• 在项目中的实现

1.2 函数式自定义组件

• 自定义组件需求
• 具体实现

1. 在 JavaScript 中并发和异步编程

1.1 概述

在同一个阶段或时期可以进行多个任务处理，这些任务通常是耗时的，类似 IO 操作读取文件（nodejs）或是网络请求。

[图片上传中...(image-9a4d40-1558701480568)]

实现这样需求通常是两种方式

1.1.2 阻塞（同步）

• 易于编写
• 多线程来实现
• 频繁的内存和线程上下文切换 Memory and context-switching overhead

1.1.2 非阻塞（异步）

• 单线程
• 通过较低内存可以实现高并发
• 适合 UI 和 IO 服务而非 CPU - bound(event-loop)

当下几乎 JavaScript 引擎都是非阻塞/事件驱动的方式来实现高并发

1.1.3 可能阻塞情况

以下情况可能会会阻塞主线程

• alert/prompt/confirm
• 同步的 XMLHttpRequest

• node 中一些同步 API 例如 fs.readFileSync

  
  evolution.jpg

1.1.5 历史

• 回调函数
• jQuery 的 defer
• promise(angularjs 项目中使用)
• async/wait

1.1.6 几个方便对比这些回调的优点和缺点

• 易维护
• 代码可读性
• 顺序执行异步
• 同步执行异步
• 错误处理

场景：通过组织获取该组织下成员 id 集合，然后遍历成员（顺序） id 获取每一个成员的信息（并发）。

1.2 callback(回调函数)

• 在 for/while 中实现回调

1.2.1 优点

• 相对比较底层的抽象
• 性能不错(因为是底层)
• 全能(几乎可以解决所有的异步的问题)

1.2.2 缺点

• 无论是顺序和还是同步实现起来都比较困难
• 难于在 while/for 或是 try/catch 中使用
• 难于错误处理
• 维护难(以上的总结)

1.2.3 复杂度

• 链式调用(回调金字塔)
• 组合

const fs = require('fs');

fs.readFile('a.txt',(err,data)=>{
    if(err) return;
    console.log(data.toString());
})

promise

1.3 promise

promise 就是一个对象，在未来的时间执行内部的 resolve 方法，

 function fetchAvatarUrl(userId){

    return fetch(`https://catappapi.herokuapp.com/users/${userId}`)
        .then(response => response.json())
        .then(data => data.imageUrl)
}

• map/filter 返回的是

1.5 iterator(迭代器)

只要对象实现了[Symbol.]

1.5.1 接口

在 OOP 编程思想中我们少不了接口概念，什么是接口，接口是一种契约是一种行为规范。接口和类概念在现代语言变得模糊。在 Typescript 和 class 接口可以相互替换和继承的。
接口可以可以看出一类具有相同行为，就是按事物的行为进行划分。所以接口也可以看做类型。

1.5.2 在 JavaScript 中接口的实现

1.5.3 什么是 Symobl

唯一性，

1.5.5 iterator 内部机制

[demo2.js)

pause-time.jpg

1.6 generator(生成器)

是一个特殊函数，与一般函数不同定义时候通常在 function 后面添加 * 来和普通函数进行区别，

1.7 async/wait

async 实际就是返回一个 promise

    // await 返回的是实际数据而不是 promise 如果不用 await
    const response = await fetch(`https://catappapi.herokuapp.com/users/${userId}`)
    response
    response.json();
}

图1

正常 fectch 返回一个 promise 对象。

图2

如果在 async 函数中在一个表达式添加一个 await 代码在函数中执行到此处会暂停等到异步表达式执行完毕后返回的是一个返回对象而非 promise 对象

图3

修改代码