异步处理方案

Promise

作用

Promise对象是一个异步变成的解决方案,可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)

注意

promise不是异步代码,而是盛放异步代码的工具

实例化promise：为了把异步代码写到promise中，异步代码执行状态会返回出去

静态属性/方法

resolve()

• 直接返回一个成功状态的promise对象

reject()

• 直接返回一个失败状态的promise对象

all()

• Promise.all([xx,xx,xx])

• 检测所有传入all中的promise对象，等待所有promise执行，当有一个返回rejected，则all方法返回rejected的promise对象

• 当所有的promise对象全部为fulfilled的时候
  则all方法返回fulfilled状态的promise对象

• 当Promise.all方法返回一个成功状态的promise对象的时候，他的PromiseResult的值是一个数组，保存的时候all方法中所有promise对象resolve的输出的值

• 当Promise.all方法返回一个失败状态的promise对象的时候，他的promise状态就是第一个失败的promise的状态

race()

• 使用promise.race([XXX,XXX,XXX])

• race方法返回promise对象，promise对象的状态是race中第一个执行完成的那个promise的状态（无论成功还是失败）

allSettled()

• 只要里边的promise对象没有执行完成，则allSettled返回pending状态的promise对象

• 只要里边的promise对象全部完成了，则allSettled返回fulfilled状态的promise对象（无论是否所有的promise都失败了）

• 当所有的请求完成，allSettled的状态值就是成功，allSettled的value就是一个数组，包含了所有的方法内返回promise对象

prototype

then()

• then方法中有两个参数，都是函数,第一个函数是成功处理函数，第二个函数是失败处理函数,但是一般不用第二个

• then中的函数如果 没有书写return
  或者promise等，那么本身返回一个promise的fulfilled状态的对象,（promiseResult：undefined）

• then中的函数，如果返回一个promise对象，then的返回值就是这个promise对象，promise对象的状态和内部返回的promise状态一致

• then中的函数，返回值不是一个promise对象，则then还是返回成功状态的promise对象,但是PR值就是这个返回的值（promiseResult：return的值）

• 如果then中的函数出错了（有异常了），则then返回一个失败的promise对象

catch()

• catch是处理失败promise的方法,catch返回值的规则和then一样

finally()

• 无论promise返回成功还是失败，都会执行finally方法

  • Promise {<pending>}见下面调用状态

• 如果promise是成功状态调用的，则finally返回成功状态

  • [[PromiseState]]: “fulfilled” [[PromiseResult]]: 返回值

• 如果promise是失败状态调用的，则finally返回失败状态

  • [[PromiseState]]: “rejected” [[PromiseResult]]: “错误信息”

new Promise()

函数是同步执行的

promise不是异步代码，而是盛放异步代码的工具

promise内的代码是同步的

实例化promise：为了把异步代码写到promise中，异步代码执行状态会返回出去

参数

resolve()

• 异步操作执行成功后的回调函数

reject()

• 异步操作执行失败后的回调函数

状态

Promise对象有三种状态：代表异步执行的状态,对象的状态只能改变一次

pending

• 初始化状态

  • 异步代码还在执行中

  •
  Promise正在执行，或者你没有调用成功失败函数，那么promise的状态将一直都是pending

  •
  当代码正在执行的时候，promise中的值是{PromiseState：pending,PromiseResult:undefined}

resolved/fulfilled

• 成功状态

  •
  异步代码执行成功了,调用resolve函数，可以将promise对象的状态由pending变成resolved

rejected

• 失败状态

  •
  异步代码执行失败了,调用reject函数,可以将promise对象的状态由pedding变成rejected

返回值

也是一个promise对象

PromiseState：pending fulfilled/resolved rejected

PromiseResulte:promise返回的信息

• resolve的参数就是异步代码执行成功后需要给promise的数据

• reject的参数就是异步代码执行失败的错误信息 发送给promise对象

resolve 和 reject两个同时书写，以第一个为准.无论返回成功还是失败，后边的代码都会继续执行完成

async

async定义的函数，调用以后会返回一个promise对象

返回值

默认情况下返回 成功状态的promise对象，值是undefined

如果return了一个值，则返回是成功的promise对象，值是return的内容

如果return了一个promise对象，则async函数的返回值就是这个promise对象

如果async函数 抛出错误 或者 是里边等待了一个失败的promise对象，则async的返回值是失败的promise对象，promise对象的值就是 reject的参数 或 错误

await

await只会等待promise对象，其他的一概不等

如果等待的promise对象返回成功状态，则继续向下运行，最后async函数返回一个成功的promise对象

如果等待的promise对象返回的是失败状态，则停止运行，async函数返回这个失败的promise对象

只有当上一个返回成功,下一个才会执行

1. await的返回值是成功的promise对象的promiseReasult的值,

动态import

import动态加载js模块,只要加载进来就可以执行,但是我们可以需要的时候再使用import加载，而不是初始化页面的时候一次性引入所有的模块

import返回的是一个promise对象，如果正常加载进来，则返回成功promise，否则返回失败promise

既然返回的是promise对象，则可以使用then catch方法