Promise和async-await

Promise和async-await

Promise ——解决回调地狱，提供链式调用

• 回调函数

  • 单个异步请求
  • 多个异步请求相互依赖 —— 回调地狱
  • 存在问题
    • 不利于阅读维护
    • 异步操作顺序变更时，需要大规模代码重构
    • 回调函数大多是匿名函数，bug追踪困难

• Promise含义 —— 用于异步操作，表示尚未完成且预计在未来完成的异步操作

• 优势

  • 将异步操作以同步操作的流程表示，利于阅读维护
  • 将数据请求和数据处理明确分开，掌握控制权

• 状态

  • pending：初始值
  • fulfilled：操作成功
  • rejected：操作失败
  • 状态转换：只有 等待—>完成，等待—>拒绝

• Promise构造器

  • Promise是一个构造函数，new Promise 返回promise实例对象

  • 接收executor函数作为参数，executor函数两个函数类型形参 resolve，reject

  • Promise构造函数执行时立即调用执行executor函数（同步任务）

    • new Promise(function(resolve,reject){
      	/*executor*/
      })
      

    • 调用resolve成功，pending—>resolve

    • 调用失败，pending—>rejected

    • resolve 或 reject 只有第一次执行有效，多次调用没有任何作用

• Promise封装异步操作

  • 在回调函数中针对不同的返回结果，调用resolve或reject
  • 异步操作成功调用resolve函数，将返回值作为参数传递到外部
  • 操作失败调用reject函数，将错误信息作为参数传递到外部

• Promise异步操作结果处理

  • then方法 —— 异步执行

    • resolve(成功) onFulfilled 会被调用，onFulfilled 是用来接收 promise 成功的值
    • reject(失败) onRejected 会被调用，onRejected 是用来接收 promise 失败的原因
    • 调用返回的promise对象保持当前状态，除非新创建
    • promise 状态一旦改变则不能再变

  • catch方法 —— 异步执行

    • 在链式写法中可以捕获 then 中发送的异常

    • 写法

      • promise.then(onFulfilled,onRrejected);
        promise.then(onFulfilled).catch(onRrejected);
        

  • finally方法

    • finally（）返回一个Promise
    • 成功失败都会执行

• 任务队列分类

  • 宏任务 —— ajax，setTimeout，setInterval，异步IO操作，…
  • 微任务 —— Promise.then catch finally
  • 宏/微任务执行顺序
    • 执行一个宏任务，遇到微任务，添加到微任务队列，一个宏任务执行完毕后，立即执行当前微任务队列中所有微任务（循环该过程知道任务队列为空）

• 静态方法

  • Promise.resolve() —— 返回一个状态为 resolved 的Promise对象
  • Promise.reject() —— 返回一个状态为 reject 的Promise对象
  • Promise.all()
    • 将多个 Promise 对象组成的数组包装成一个 Promise 对象
    • 数组中 Promise 的状态全部变为 resolved，all 方法返回状态为 resolved
    • 数组中 Promise 的状态一个为 reject，all 方法返回状态为 reject
  • Promise.race()
    • 接收Promise数组，返回新的Promise
    • 返回状态由率先完成的Promise的状态决定

async/await —— 包装Promise对象(语法糖)

• async —— 写在函数前面的关键字，表示内部有异步操作
• await —— 写在函数内部，后面是Promise对象，返回该对象结果，不是返回对应值，await返回后，async函数内后续代码才能执行

fetch —— 异步网络请求

• fetch
  • 返回Promise实例
  • 通过.then接收响应结果
• fetch发起GET请求
  • fetch不传递选项时，默认发起GET请求
  • 可以明确指定发送GET请求
  • 调用形式 ：fetch（url，options）
    • url 是一个字符串，options是object类型
• fetch发起POST请求
  • fetch发起非GET请求时，必须指明method
• fetch响应结果包含的数据（请求结果res包含的属性）
  • headers 类型为object，包括响应的头信息
  • ok 类型为boolean，请求是否成功
  • status 类型为number，响应状态码
  • statusText 类型为string，响应状态码对应的文本描述
  • text 函数，返回数据的文本格式
  • blob 函数，返回数据的原始二进制流
  • json 函数，对数据进行JSON.parse后返回，若返回格式不是合法的JSON格式，会报错。