背景

JavaScript 是单线程。。。

https://mp.weixin.qq.com/s/WIVYOtuiXQvg-IsY6cHb5w

回调函数

Web 页面的单线程架构决定了异步回调，而异步回调影响到了我们的编码方式
封装异步代码，让处理流程变得线性
image.png

封装请求过程

  1. //[in] request，请求信息，请求头，延时值，返回类型等
  2. //[out] resolve, 执行成功，回调该函数
  3. //[out] reject  执行失败，回调该函数
  4. function XFetch(request, resolve, reject) {
  5.     let xhr = new XMLHttpRequest()
  6.     xhr.ontimeout = function (e) { reject(e) }
  7.     xhr.onerror = function (e) { reject(e) }
  8.     xhr.onreadystatechange = function () {
  9.         if (xhr.status = 200)
  10.             resolve(xhr.response)
  11.     }
  12.     xhr.open(request.method, URL, request.sync);
  13.     xhr.timeout = request.timeout;
  14.     xhr.responseType = request.responseType;
  15.     //补充其他请求信息
  16.     //...
  17.     xhr.send();
  18. }
  2. XFetch(makeRequest('https://time.geekbang.org'),
  3.     function resolve(data) {
  4.         console.log(data)
  5.     }, function reject(e) {
  6.         console.log(e)
  7.     })

Promise

image.png
Promise 解决的是异步编码风格的问题

  • 消灭嵌套调用
    • 回调函数的延时绑定
    • 将回调函数 onResolve 的返回值穿透到最外层
  • 合并多个任务的错误处理
    1. Web 页面的单线程架构决定了异步回调，而异步回调影响到了我们的编码方式
    2. 封装异步代码，让处理流程变得线性
    3. 封装请求过程
    4. //[in] request，请求信息，请求头，延时值，返回类型等
    5. //[out] resolve, 执行成功，回调该函数
    6. //[out] reject  执行失败，回调该函数
    7. function XFetch(request, resolve, reject) {
    8.   let xhr = new XMLHttpRequest()
    9.   xhr.ontimeout = function (e) { reject(e) }
    10.   xhr.onerror = function (e) { reject(e) }
    11.   xhr.onreadystatechange = function () {
    12.       if (xhr.status = 200)
    13.           resolve(xhr.response)
    14.   }
    15.   xhr.open(request.method, URL, request.sync);
    16.   xhr.timeout = request.timeout;
    17.   xhr.responseType = request.responseType;
    18.   //补充其他请求信息
    19.   //...
    20.   xhr.send();
    21. }
    22. XFetch(makeRequest('https://time.geekbang.org'),
    23.   function resolve(data) {
    24.       console.log(data)
    25.   }, function reject(e) {
    26.       console.log(e)
    27.   })
  2. var x1 = XFetch(makeRequest('https://time.geekbang.org/?category'))
  3. var x2 = x1.then(value => {
  4.     console.log(value)
  5.     return XFetch(makeRequest('https://www.geekbang.org/column'))
  6. })
  7. var x3 = x2.then(value => {
  8.     console.log(value)
  9.     return XFetch(makeRequest('https://time.geekbang.org'))
  10. })
  11. x3.catch(error => {
  12.     console.log(error)
  13. })

async/await

实战：