前端Promise

1.Promise状态

1. 有三种状态：pending(进行中，初始状态)、fulfilled(成功状态，也叫resolved)、rejected(失败状态)
2. 过程只有两个：成功、失败
3. 一个promise对象只能是改变一次，不论成功失败

2.Promise 基本流程

3.Promise 使用

1.基本使用

function doDelay(timeout){
? ? // 创建一个新的promise对象并返回
? ? return new Promise((resolve, reject) => { // 执行器函数
? ? ? ? ?// 执行异步操作任务
? ? ? ? setTimeout(() => {
? ? ? ? ? ? const time = Date.now()
? ? ? ? ? ? // 如果当前时间是偶数代表成功，否则失败
? ? ? ? ? ? if (time % 2 === 0) {
? ? ? ? ? ? ? ? // 如果成功，调用resolve(value)
? ? ? ? ? ? ? ? resolve('成功的数据，time=' + time)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // 如果失败，调用reject(reason)
? ? ? ? ? ? ? ? reject('失败的数据，time=' + time)
? ? ? ? ? ? }
? ? ? ? }, timeout);
? ? })
}
let promise = doDelay(1000)
//.then() 和执行器(executor)同步执行，.then() 中的回调函数异步执行
promise.then(
? ? value => { // 接收得到成功的value数据 onResolved
? ? ? ? console.log('成功的回调', value) ?// 成功的回调 成功的数据
? ? },
? ? reason => { // 接收得到失败的reason数据 onRejected
? ? ? ? console.log('失败的回调', reason) ? ?// 失败的回调 失败的数据
? ? }
)?????????

2. 用于封装ajax异步请求

function promiseAjax(url){
? ? // 创建一个新的promise对象并返回
? ? return new Promise((resolve, reject) => { // 执行器函数
? ? ? ? ?const xhr = new XMLHttpRequest();
? ? ? ? ?xhr.onreadystatechange=()=>{
? ? ? ? ? ? ?if(xhr.readyState!==4) return;
? ? ? ? ? ? ?const {status,response} =xhr;
? ? ? ? ? ? ?if(status>=200&&status<300){
? ? ? ? ? ? ? ? ?resolve(JSON.parse(response))
? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ?reject(new Error("失败，status:"+status))
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? ?xhr.open("GET",url);
? ? ? ? ?xhr.send()
? ? })
}
let promise = promiseAjax('xxx')
promise.then(
? ? data => {
? ? ? ? console.log('成功的回调', data)
? ? },
? ? error => {
? ? ? ? console.log('失败的回调', error.message)
? ? }
)

3.同时访问多个服务

? ? Promise.all([this.querySthjDapinglotwryWaterairdayTotal(code), queryListTBusLicCheckEmissionGroupLimitModel(queryParamsFs)]).then(([res1, res2]) => {

//res1是第一个服务的值

//res2是第二个服务的值

? ? ? })

4.为什么使用Promise

特点：

1. 将异步操作以同步操作的流程表达出来，避免层层嵌套，是流程更加清晰，代码更加优雅
2. 提供统一的接口，使异步操作更加容易

缺点

1. ?一旦执行，无法取消
2. 如果不设置回调函数，当promise内部抛出错误时，不会反映到外部
3. 当状态时pending时，无法知道目前进展到那个阶段

5.链式调用

async function request() {
? try{
? ? const result = await doSomething()
? ? const newResult = await doSomethingElse(result)
? ? const finalResult = await doThirdThing(newResult)
? ? console.log('Got the final result:' + finalResult)
? } catch (error) {
? ? failureCallback(error)
? }
}?

?6.使用promise

1.promise构造函数

? ? ? ? executor函数：同步执行(res,rej)=>{}

? ? ? ? resolve函数：内部定义成功时调用的函数 resolve(value)

? ? ? ? reject函数：内部定义失败时调用的函数 reject(value)

let p = new Promise((resolve,reject)=>{
? ? console.log(1111)
})
console.log(222)
//输出结果
//111
//222

参考

1.前端Promise

2.Promise面试题汇总