promise

match_M

已于 2023-04-28 18:22:52 修改

阅读量39

点赞数

文章标签：前端 javascript Powered by 金山文档

于 2023-01-13 18:10:17 首次发布

本文链接：https://blog.csdn.net/m0_56141160/article/details/128667208

版权

基本使用:

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

promise 的状态：实例对象中的一个属性『PromiseState』

pending 未决定的

resolved / fullfilled 成功

rejected 失败

function rand(m,n){
  return Math.ceil(Math.random()*(n-m+1)+m-1)//Math.random()返回的是0-1之间的随机数
}
var btn=document.querySelector("#btn")
btn.addEventListener("click",()=>{//事件发生的回调
  //1.普通回调函数写法
    // setTimeout(() => {
    //   let n=rand(1,100)
    //   if(n>50){alert("恭喜你中奖了！")}
    //   else{alert("再接再厉。。")}
    // }, 1000);
  
  //2.用promise
      //2.1promise接收的是一个函数(执行器函数):【状态标记】
        //相当于把回调函数的内容放到了promise里进行处理
        //这个函数要接收两个参数：成功的函数、失败的函数
      //2.2对异步任务进行封装:
        //符合要求，将状态改为成功【可以传递值给回调】
        //不符合要求，将状态改为失败
    let p=new Promise((resolve,reject)=>{
        setTimeout(() => {
        let n=rand(1,100)
        if(n>50){resolve(n)}
        else{reject(n)}
      }, 1000);
    })
      //2.3根据状态调用相应回调：【调用】
        //成功的回调
        //失败的回调
    p.then((a)=>{alert("恭喜你中奖了！"+a)},(b)=>{alert("再接再厉。。"+b)})
})

1.用 promise 封装基于定时器的异步:

function doDelay(time) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
        if (time % 2 === 1) { // 成功了
          resolve(time)
        } else { // 失败了
          reject(time)
        }
      }, time)
    })
  }
const promise = doDelay(2000)
promise.then(
    value => {
      console.log('成功的 value: ', value)
    },
    reason => { 
      console.log('失败的 reason: ', reason)
    },
  )

2.fs模块使用Promise

const fs = require('fs');

//回调函数 形式----------------------------------------------------
 fs.readFile('./resource/content.txt', (err, data) => {
     // 如果出错 则抛出错误
     if(err)  throw err;
     //输出文件内容
     console.log(data.toString());
 });

//Promise 形式-----------------------------------------------------------

function mineReadFile(path){
    return new Promise((resolve, reject) => {
        //读取文件
        fs.readFile(path, (err, data) =>{
            //判断
            if(err) reject(err);//把执行结果作为参数给参数函数对象
            //成功
            resolve(data);
        });
    });
}

mineReadFile('./resource/content.txt')
.then(value=>{//.then是打印执行结果
    console.log(value.toString());
}, reason=>{
    console.log(reason);
});

3.promise封装Ajax

function promiseAjax(url) {

    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()//创建请求体
      xhr.open("GET", url)//初始化
      xhr.send()//发送请求 

      xhr.onreadystatechange = () => {//处理响应结果

        if (xhr.readyState === 4){//===4是所有结果都返回的状态
        
        if (status >= 200 && status < 300) {
          resolve(JSON.parse(response))//拿到响应数据
        } else { 
          reject(new Error('请求失败: status: ' + status))//请求失败状态码
        }
      }
     }
    })
  }
promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=vid
    eo ')
    .then(
      data => {
        console.log('显示成功数据', data)
      },
      error => {
        alert(error.message)
      }
    )

4.util.promisify方法

可以将函数直接变成promise的封装方式,不用再去手动封装。

//引入 util 模块
const util = require('util');
//引入 fs 模块
const fs = require('fs');
//返回一个新的promise形式的函数
let mineReadFile = util.promisify(fs.readFile);

mineReadFile('./resource/content.txt').then(value => {
  console.log(value.toString());
});

promise的API

Promise.resolve

//1.如果传入的参数为非promise对象，则返回的结果为成功的promise对象
let p1=Promise.resolve(521)
//2.如果传入的参数为promise对象，则参数的结果决定了resolve的结果
let p2=Promise.resolve(new Promise((resolve,reject))=>{
   // resolve("ohhhh")
    reject("error")
})
//对象{状态：结果}
console.log(p1)//Promise {<fulfilled>: 521}
console.log(p2)//Promise {<rejected>: 'error'}

注：当出现reject时，后面一定要通过catch或then对错误进行处理，否则浏览器会报错

Promise.reject

let p3=Promise.reject(new Promise((resolve,reject)=>{
   resolve("ohhhh")
    // reject("error")
}))
console.log(p3)//Promise {<rejected>: Promise}
//此处PromiseResult是一个状态成功的promise对象

Promise.all

let p1=new Promise((resolve,reject)=>{
  resolve("okkk")
})
let p2=Promise.reject("error")
let p3=Promise.resolve("yes")
//都成功返回状态为成功的promise对象，PromiseResult就是成功状态下返回的结果数组
//有一个失败就返回失败的promise对象，PromiseResult只是失败状态下的一个结果
const result=Promise.all([p1,p2,p3])
console.log(result)

Promise.race

第一个改变状态的结果就是返回的结果

Promise.any

有成功的状态就返回一个成功的结果

全失败的状态就返回一个失败的promise对象,PromiseResult是AggregateError: All promises were rejected

Promise的几个关键问题：

1.如何改变 promise 的状态?

(1) resolve(value): 如果当前是 pending 就会变为 resolved

(2) reject(reason): 如果当前是 pending 就会变为 rejected

(3) 抛出异常: 如果当前是 pending 就会变为 rejected

2.一个 promise 指定多个成功/失败回调函数, 都会调用吗?

当 promise 改变为对应状态时都会调用,改变状态后,多个回调函数都会调用,并不会自动停止。

let p = new Promise((resolve, reject) => {  resolve('OK');});//假如这里不对状态进行设置，则不会执行回调。

  ///指定回调 - 1
  p.then(value => {  console.log(value); });

  //指定回调 - 2
  p.then(value => { alert(value);});

3.改变 promise 状态和指定回调函数谁先谁后?

场景是在浏览器编译代码的顺序中，这两步谁先谁后都有可能

先改变状态再指定回调函数：

在执行器中直接调用 resolve()/reject() -->即,不使用定时器等异步方法,执行器内直接同步操作时

先指定回调，再改变状态：【较多使用】

先指定回调再改变状态(异步):先指定回调--> 再改变状态 -->改变状态后才进入异步队列执行回调函数。

回调函数的执行一定在状态改变后

4.promise.then()返回的新 promise 的结果状态由什么决定?

let p = new Promise((resolve, reject) => {
    resolve('ok');
});
//执行 then 方法
    let result = p.then(value => {
    console.log(value);
// 1. 抛出错误 ,变为 rejected
    throw '出了问题';
// 2. 返回结果是非 Promise 类型的对象,新 promise 变为 resolved，结果就是这个非promise对象
    return 521;
// 3. 返回结果是 Promise 对象,此 promise 的结果就会成为新 promise 的结果
    return new Promise((resolve, reject) => {
  // resolve('success');
      reject('error');
    });
}, reason => {
console.warn(reason);
});

5.异常穿透

当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调；前面任何操作出了异常, 都会传到最后失败的回调中处理。最后用catch捕获...

6.中断 promise 链?

有且只有一个办法: 在回调函数中返回一个 pendding 状态的promise 对象。

let p = new Promise((resolve, reject) => {setTimeout(() => { resolve('OK');}, 1000);});
p.then(value => {return new Promise(() => {});})//有且只有这一个方式
.then(value => { console.log(222);})
.then(value => { console.log(333);})
.catch(reason => {console.warn(reason);});

async函数：

函数的返回值为 promise 对象

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

await关键字：

await右侧一般是promise对象，返回的是promise成功的值

1.如果表达式是 promise 对象, await 返回的是 promise 成功的值，如果是失败的值则通过try..catch捕获

2.如果表达式是其它值, 直接将此值作为 await 的返回值

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

回调地狱：

await的妙用：解决回调地狱

如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

async componentDidMount() { // 这是React Native的回调函数，加个async关键字，没有任何影响，但是可以用await关键字
    // 将异步和同步的代码放在一个try..catch中，异常都能抓到
    try {
        let array = null;
        let data = await asyncFunction();  // 这里用await关键字，就能拿到结果值；否则，没有await的话，只能拿到Promise对象
        if (array.length > 0) {  // 这里会抛出异常，下面的catch也能抓到
            array.push(data);
        }
    } catch (error) {
        alert(JSON.stringify(error))
    }
}

async function async1() {
    console.log("async1 start")
    await async2()
    console.log("async1 end")
}

//等价于写法
async function async1() {
new Promise((resolve, reject) =>{
    console.log("async1 start")
    resolve(async2())
}).then(()=>{
    // 执行 async1 函数await之后的语句
    console.log("async1 end")
})
}