才吹小雨又须晴 BlogMyTags
Promise-async/await

Promise async/await

  • 定义：ES6引入的异步编程的构造函数（新），封装异步任务，好处是支持链式调用，解决回调地狱（旧方案，回调函数且套调用）的问题。

  • promise对象用来封装一个异步操作并可以获取成功或失败的结果

  • 旧的：必须在异步任务之前结束指定；新的：启动异步，返回promise对象，给promise对象绑定回调函数，甚至可以在异步结束后；

异步编程包括

fs 文件操作(node.js) 数据库操作 ajax 定时

AJAX请求，四步操作

  • 创建对象 const xhr = new XMLHttpRequest();

  • 初始化 xhr.open(‘请求类型’,’接口地址’)

  • 发送 xhr.send()

  • 绑定事件，处理响应结果

    xhr.onreadystatechange = function(){}

Promise 状态

是实例对象中的一个属性 PromiseState

  • pending
  • resolved / fulfilled（成功）
  • rejected（失败）

Promise 对象的值

实例对象中的一个属性 PromiseResult

  • 异步 成功/失败的结果
  • resolve，reject函数可以修改值

Promise 的 API

const p = new Promise((resolve,reject) =>{}) Promise内部是同步调用，封装异步操作，then方法是异步

Promise.resolve Promise.reject

  • 返回的都是promise对象
<script>
    // 如果传入的参数是 非promise对象，返回的结果都是成功的
    let p1 = Promise.resolve(521)
    console.log(p1);
</script>

WX20220808-212245@2x

Promise.all

  • const result = Promise.all([p1,p2,p3])
  • 返回promise对象，接受一个参数，由 promise 组成的数组（promise套promise），只有所有的promise 成功才成功，返回结果是成功的 promise 组成的数组；失败的结果是失败的 promise 结果组成的数组。

Promise.race

  • 返回promise对象，接受一个参数，由 promise 组成的数组，最终结果由第一个完成的 promise 结果状态

关键问题

  1. 修改对象状态
  • 还可以抛出一个错误 throw '出问题了’
  1. 执行多个回调
  • 也就是 promise 对象调用 then 方法时，当 promise 状态发生改变时，有多个成功/失败回调函数，都会被调用
  1. Promise内部操作（1）与指定回调函数（2 不是执行回调函数）的顺序
  • Promise内部是同步操作时，先1后2，然后执行回调函数
  • Promise内部是异步操作时，先指定回调函数，然后执行异步操作，然后执行回调函数，输出结果
  1. then方法返回结果由什么决定
  • then方法返回的是一个 promise 对象
  • 由then方法内部的回调函数的结果决定的
  1. promise 如何串联多个操作任务
  • 通过 then 的链式调用
  1. 如何中断 promise 链
  • 只有一个方法：then方法中返回一个 pedding 状态的Promise 才能中断。

async

  • 函数返回值为promise对象
  • 对象结果是由 async 函数执行的返回值决定的。

await

  • await 右侧的表达式一般为promise 对象
  • 若表达式为promise 对象，await返回的是成功的值
  • 若表达式为其他值，直接将此值返回

注意：- await 必须写在async函数中，但async函数中可以没有await

- 若 await 的 promise 失败了，就会抛出异常，需要try catch捕获处理
Promiseasync/await