关于javascript:JavaScript-异步操作进化史

4次阅读

共计 5788 个字符，预计需要花费 15 分钟才能阅读完成。

这篇博客是我集体对 JavaScript 异步操作 的 总结归类。
通过这篇文章我也心愿读者能够从 宏观 的角度对待 JavaScript 异步操作是如何演变的。
然而如果想要通过这篇博客全面把握 promise 或者 async 函数等其余技术的全副常识，还是不太事实的。
举荐大家精读 阮一峰 老师的 ECMAScript 6 入门 – Promise 对象，和 尼古拉斯 老师的 《深刻了解 ES6》 的第十一章（Page 219）。

  用有一点哲学调调的话说：JavaScript 异步操作进化的终极目标就是让异步的代码 
看起来更像同步的代码。JS 这门语言单线程运作的本能，并没有让应用它的人感觉它是鸡肋的，反而让程序 
员们发明出了各式各样的工具来进步它的性能。从回调函数到 Promise 对象，再到被认为是 JS 异步操作最终解决方案的 async 函数。这其中的每一次进化都是从无到有，从社区到规范。这篇博客将从源头登程，先探讨一下为什么 JS 须要异步操作。接着再解释一些概念性的
名词。最初捋一捋 JS 异步操作的倒退过程。

JavaScript 这么语言设计的初衷是为了 解决用户与浏览器的交互问题。
这其中有一项重头戏就是 DOM 操作 。试想一下某个代码块是在 批改 DOM，另外还有一个代码块须要 删除 DOM。那么应该听谁的？
为了避免出现比较复杂的线程同步问题，JS 执行环境中负责执行代码的线程只有一个。这就是咱们常说的 JavaScript 单线程工作模式。

有的时候在执行一些 很耗时 的工作时，就须要期待当前任务执行完能力进入下一个工作。这样程序就会呈现 假死景象 ，也就是咱们常说的阻塞。
为了防止这样的状况产生，JS 将 工作模式 次要分为两类：同步模式 和异步模式。

同步模式执行的代码会在 执行栈 中排队执行。也就是咱们常说的 压栈运行 ，当运行完了当前就会被 弹出栈 。 闭包函数 能够把某一变量 长久保留 在执行栈中。

异步模式的代码 不会进入主线程 ，也就是咱们的执行栈。而是进入 工作队列 或者说 音讯队列 中。当 执行栈 中所有 同步工作 执行结束，零碎就会去读取 工作队列 ，那些 异步代码 就会完结期待， 进入执行栈，开始执行。

Note：同步还是异步是指 运行环境 提供的 API 是以同步或异步模式的形式工作。

同步 API：console.log()
异步 API：setTimeOut()

执行栈。主线程运行的时候，产生堆和栈，栈中的代码调用各种内部 API，它们在工作队列中退出各种事件。

音讯队列。

浏览器所提供的各种 API 接口。

只有栈中的代码执行结束，主线程 就会从 音讯队列 中读取异步操作，这个过程是循环不断的，所以整个的这种运行机制又称为 事件循环 — Event Loop。

对于 stack、message queue、event loop 和 web api 的关系可参考下图：

回调函数 是最早的异步操作实现形式。它是由 调用者定义 ，交给 执行者执行 的函数。几种常见的利用有：事件机制 和公布 - 订阅模式 等。

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function () { ...} // 在接管到残缺的响应数据时触发的回调函数
xhr.onerror = function () { ...} // 在申请发送谬误时触发的回调函数
xhr.send()

缺点：当咱们须要发送 多个申请 ，并且要在这些申请 全副都返回胜利 的时候去对所有的申请后果做某些解决时，未免要想一些非凡的技巧。最简略的形式就是把每个申请都嵌套起来，当一个申请胜利时再去执行下一个申请。这样实现的问题首先会很浪费时间，其次也会造成咱们常说的 回调天堂 的状况，使代码既 不美观 也很难保护。

/* 第一层 */
$.ajax({
    url: URL1,
    /* callback1 */
    success: function () {
        /* 第二层 */
        $.ajax({
            url: URL2,
            /* callback2 */
            success: function () {
                ...
                /* 第 n 层 */
                $.ajax({...})
            }
        })
    }
})

Promise 是一个对象，是为 异步操作 的后果所筹备的 占位符 。用来示意 异步工作 完结之后是胜利还是失败。Promise 的状态一旦确定当前，就 不能够被批改。

Promise 的生命周期 ：在执行 异步操作 时，会承诺给出一个后果，在最初给出后果之前叫做 pending 状态，给出的后果有两种，胜利的 fulfilled 状态和失败的 rejected 状态。在给出后果之后须要作出一些反馈（交代工作），与之对应的就是 onFulfilled 和 onRejected。

then() 办法 ：能够应用 then() 办法在 Promise 的 状态扭转时 执行一些特定操作。

Promise 的实质是应用 回调函数 定义 异步工作 完结后所需执行的工作。

function ajax (url) {return new Promise(function (resolve, reject) {var xhr = new XMLHttpRequest()
      xhr.responseType = 'json'
      xhr.onload = function () {if (this.status === 200) {resolve(this.response)
          } else {reject(new Error(this.statusText))
          }
      }
      xhr.send()})
}

ajax('/api/user.json').then(function (res) {console.log(res)
}, function (error) {console.log(error)
})

串联 Promise
- Promise 对象的 then() 办法会返回一个 全新的 Promise 对象
- 前面的 then() 办法就是为上一个 then 返回的 Promise 注册回调
- 后面 then() 办法中回调函数的 返回值 会作为前面 then() 办法回调的参数
- 如果回调中 返回的是 Promise，那前面的 then() 办法的回调会期待它的完结
- 因而 Promise 是能够进行 链式调用 的。每一个 then() 办法实际上都是在为上一个 then() 办法返回的 Promise 对象 增加状态明确过后的回调。
```
let p1 = new Promise(function(resolve, reject) {resolve(42);
})

p1.then(function (value) {console.log(value)
}).then(function () {console.log("Finished")
})

// 42
// Finished
```
捕捉谬误
- onRejected 回调 在 Promise 失败或者呈现异样时都会被执行。
- catch() 办法相当于 then() 办法所承受的第二个参数，然而区别在于 — catch() 办法在 Promise 链中容许咱们捕捉前一个 Promise 的实现或回绝处理函数中产生的谬误。
```
let p1 = new Promise(function(resolve, reject) {throw new Error("Explosion")
})

p1.catch(function (error) {console.log(error.message)
  throw new Error("Boom")
}).catch(function (error) {console.log(error.message)
})
```

Promise 静态方法

/* Promise.resolve() */
let promise = Promise.resolve(42)

promise.then(function (value) {console.log(value)  // 42
})

/* Promise.reject() */
let promise = Promise.reject(42)

promise.catch(function (value) {console.log(value)  // 42
})

/* 上面这两种写法是等价的 */
Promise.resolve('foo')
.then(function (value) {console.log(value)
})

new Promise(function (resolve, reject) {resolve('foo')
})

Promise 并行执行

/* Promise.all()
 * 该办法接管单个可迭代对象（例如数组）作为参数，并返回一个 Promise。* 所有的可迭代 Promise 元素都实现后，所返回的 Promise 才会被实现。*/
let p1 = new Promise(function (resolve, reject) {resolve(42)
})

let p2 = new Promise(function (resolve, reject) {reject(43)
})

let p = Promise.all([p1, p2])

p.catch(function (value) {console.log(value)  // 43
})

/* Promise.race()
 * 该办法也接管一个 Promise 可迭代对象，并返回一个新的 Promise。* 一旦起源 Promise 中有一个被解决，所返回的 Promise 就会立刻被解决。*/
 let p1 = Promise.resolve(42)
 
 let p2 = new Promise(function (resolve, reject) {resolve(43)
 })
 
 let p = Promise.race([p1, p2])
 
 p.then(function (value) {console.log(value)  // 42
 })

回调队列 中的工作被称为 宏工作 。宏工作执行过程中，能够长期加上一些额定需要。能够抉择作为一个 新的宏工作 进入工作队列排队，也能够作为 当前任务 的 微工作 ， 间接在当前任务完结过后立刻执行 。 微工作 能够 进步整体的响应能力 ，Promise 的回调会被作为微工作执行。能够应用 setTimeOut() 增加 宏工作。

console.log("global start")

setTimeOut(() => {console.log("setTimeOut")
}, 0)

Promise.resolve()
.then(() => {console.log("Promise")
})
.then(() => {console.log("Promise2")
})

console.log("global end")

// global start
// global end
// Promise
// Promise2
// setTimeOut

Generator 生成器执行过程：

定义时在函数名后面有一个 * 号
在调用 Generator 函数时并不会立刻去执行这个函数，而是会失去一个 生成器对象
当咱们调用这个 生成器对象 的 next() 办法时才会去执行
始终会执行到 yield 关键字所在的地位，并且把 yield 前面的值 返回进来，而后这个函数就会暂停执行。yield 返回值 会被接管到，模式是 {value: "foo", done: false}
当咱们 再次调用 next() 办法，并且 传入参数，那么函数就会持续往下执行，并且咱们传入的参数会作为 yield 的返回值

如果咱们在里面调用的是生成器对象的 throw() 办法，那么函数将会失去这个异样。能够在函数外部应用 try...catch...的形式 捕捉异样

function * main () {const users = yield ajax('/api/users.json')
  console.log(users)
  
  const posts = yield ajax('/api/posts.json')
  console.log(posts)
}

const g = main()

const result = g.next()

result.value.then(data => {const result2 = g.next(data)
  if (result2.done) return
  
  result2.value.then(data => {...})
})

执行 async 函数，返回的都是 Promise 对象

async function test1 () {return 1}

async function test2 () {return Promise.resolve(2)
}

const result1 = test1()
const result2 = test2()

console.log('result1', result1)
console.log('result1', result1)

Promise.then() 胜利的状况，对应 await

async function test3 () {const p3 = Promise.resolve(3)
  p3.then(data => {console.log('data', data)
  })
  
  const data = await p3
  console.log('data', data)
}

async function test4 () {
  const data4 = await 4
  console.log('data4', data4)
}

async function test5 () {const test5 = await test1()
  console.log('test5', test5)
}

Promise.catch() 异样的状况，对应 try...catch

有时咱们心愿即便前一个（异步）操作失败，也不要中断前面的（异步）操作。这时就能够应用 try...catch... 来捕捉异样
```
async function test6 () {const p6 = Promise.reject(6)
  try {
     const data6 = await p6
     console.log('data6', data6)
  } catch (e) {console.log('e', e)
  }
}
```

感激每一位为 JavaScript 做出奉献的 programmer。也感激每位正在做出致力的“埋伏者们”，期待着你们的暴发。
阮一峰老师
尼古拉斯老师
B 站“IT 课程大拿”

正文完

javascript

发表至： javascript

2021-06-30

0

正则表达式使用笔记

util.promisify 的那些事儿

关于javascript:笔记

关于javascript:🔥从0到1搭建自己的小站小白版

关于java:Java中Collections和Arrays类

关于javascript:JavaScript-异步操作进化史

特地阐明

摘要

关键词

JavaScript 为什么须要异步操作

单线程

工作模式

一些概念

Synchronous

Asynchronous

Stack

Message queue

Web API

Event loop

进化史

CallBack

Promise

宏工作和微工作

Generator

Async/Await

鸣谢

站内搜索