Promise 一：基本问题

关注

原创 2022-08-18 22:24:44 390 阅读 AI 写同款· GEO 优化 ›

关于setTimeout的知识点以及setTimeout(0)的使用场景试试以下例子： <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> <input type="text" onkeydown="show()"> <script type="text/javascript"... 阅读详情

2.2. 支持链式调用, 可以解决回调地狱问题

3. 如何使用 Promise?

3.1. API

1. Promise 是什么

理解

1. 抽象表达:

1) Promise 是一门新的技术 (ES6 规范 )

2) Promise 是 JS 中进行异步编程的新解决方案

备注：旧方案是单纯使用回调函数

2. 具体表达 :

1) 从语法上来说 : Promise 是一个构造函数

2) 从功能上来说 : promise 对象用来封装一个异步操作并可以获取其成功 / 失败的结果值

2. promise 的状态改变

1. pending 变为 resolved

2. pending 变为 rejected

说明 : 只有这 2 种 , 且一个 promise 对象只能改变一次

无论变为成功还是失败 , 都会有一个结果数据

成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

3.promise 的基本流程

4. promise 的基本使用

使用 1: 基本编码流程

使用 2: 使用 promise 封装基于定时器的异步

使用 3: 使用 promise 封装 ajax 异步请求

2. 为什么要用 Promise?

2.1. 指定回调函数的方式更加灵活

1. 旧的 : 必须在启动异步任务前通过回调函数指定

Promise之前的旧方案都是使用回调函数完成异步编程的操作
1、fs 文件操作 如 NodeJS 

require('fs').requireFile('./index.html',(error,data)=>{})

2、数据库操作 如 MongoDB MySQL

3、 AJAX 网络请求

$.get('/server',(data)=>{})

4、定时器 setTimeout(()=>{},2000)

2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函

数 ( 甚至可以在异步任务结束后指定 / 多个 )

2.2. 支持链式调用, 可以解决回调地狱问题

1. 什么是回调地狱 ?

回调函数嵌套调用 , 外部回调函数异步执行的结果是嵌套的回调执行的条件

比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。如果他们都是异步任务的话，必须进行以下操作，才能保证顺序正确：

    setTimeout(function () {  //第一层
        console.log('武林要以和为贵');
        setTimeout(function () {  //第二程
            console.log('要讲武德');
            setTimeout(function () {   //第三层
                console.log('不要搞窝里斗');
            }, 1000)
        }, 2000)
    }, 3000)

使用promise就可以解决这个问题

   function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var flag=true;
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }
                    else{
                        reject('操作失败')
                    }
                })
            })
            return p;
        }

     fn('武林要以和为贵')
    .then((data)=>{
        console.log(data);
        return fn('要讲武德');
    })
    .then((data)=>{
        console.log(data);
        return fn('不要搞窝里斗')
    })
    .then((data)=>{
        console.log(data);
    })
    .catch((data)=>{
        console.log(data);
    })

2. 回调地狱的缺点?

不便于阅读

不便于异常处理

3. 解决方案 ?

promise 链式调用

4. 终极解决方案 ?

async/await

3. 如何使用 Promise?

3.1. API

Promise 构造函数 : Promise (excutor) {}

(1) executor 函数 : 执行器 (resolve, reject) => {}

(2) resolve 函数 : 内部定义成功时我们调用的函数 value => {}

(3) reject 函数 : 内部定义失败时我们调用的函数 reason => {}

说明 : executor 会在 Promise 内部立即同步调用 , 异步操作在执行器中执行

Promise.prototype.then 方法 : (onResolved, onRejected) => {}

(1) onResolved 函数 : 成功的回调函数 (value) => {}

(2) onRejected 函数 : 失败的回调函数 (reason) => {}

说明 : 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调

返回一个新的 promise 对象

Promise.prototype.catch 方法 : (onRejected) => {}

(1) onRejected 函数 : 失败的回调函数 (reason) => {}

说明 : then() 的语法糖 , 相当于 : then(undefined, onRejected)

Promise.resolve 方法 : (value) => {}

(1) value: 成功的数据或 promise 对象

说明 : 返回一个成功 / 失败的 promise 对象

Promise.reject 方法 : (reason) => {}

(1) reason: 失败的原因

说明 : 返回一个失败的 promise 对象

// 1.创建一个新的promise对象
const p = new Promise((resolve, reject) => {
  // 执行器函数 同步回调
  // 2.执行异步操作任务
  setTimeout(() => {
    const time = Date.now();
    // 如果当前时间是偶数代表成功，否则代表失败
    // 3.1 如果成功了，调用resolve(value)
    if (time % 2 == 0) {
      resolve("成功的数据, time=" + time);
    } else {
      // 3.2 如果失败了，调用reject(reason)
      reject("失败的数据, time=" + time);
    }
  });
}, 1000);

//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果

p.then(
  (value) => {
    // 接收得到成功的value数据
    console.log("onResolved", value);
  },
  (reason) => {
    // 接收得到失败的reason数据
    console.log("onRejected", reason);
  }
);

Promise.all 方法 : (promises) => {}

(1) promises: 包含 n 个 promise 的数组

说明 : 返回一个新的 promise, 只有所有的 promise 都成功才成功 , 只要有一个失败了就

直接失败

        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
        })
        // let p2 = Promise.resolve('Success');
        let p2 = Promise.reject('Error');
        let p3 = Promise.resolve('Oh Yeah');
        
        //
        const result = Promise.all([p1, p2, p3]);

        console.log(result); // Uncaught (in promise) Error

Promise.race 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

race就是赛跑的意思，意思就是说， Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果(只有一个)， 不管结果本身是成功状态还是失败状态。

说明 : 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

收录于