Promise简单入门

言不及行yyds

已于 2022-05-22 07:35:11 修改

阅读量492

点赞数 15

文章标签：前端 javascript html typescript html5

于 2022-04-23 07:15:00 首次发布

本文链接：https://blog.csdn.net/m0_51311990/article/details/124344537

版权

Promise

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【前端技术】

前言：通过这篇文章，你能对Promise有一个简单的理解

1.Promise(又称期约)

1.1理解

抽象表达:是一门新的技术(ES6规范)

是JS进行异步编程的新解决方案

（原先是通过回调函数实现）
具体表达：是一个构造函数。Promise对象用来封装一个

异步操作并且可以获取其成功/失败的值

1.2使用场景

定时器读取文件 AJAX请求等

1.3代码风格

//创建Promise对象
new Promise((resolve,reject)=>{
    //你的异步操作比如
    setTimeout(()=>{
 
    },1000)    
})

1.4Promise值和Promise决议

Promise决议是判断Promise对象应该得到那些Promise值

2.Promise使用流程

请添加图片描述

2.1状态的改变

pending 变为 resolved
pending 变为 rejected

只有这 2 种, 且一个 promise 对象只能改变一次
无论变为成功还是失败, 都会有一个结果数据
成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

2.2基本使用

let p = new Promise((resolve, reject) => {
        setTimeout(() => {
          const time = Date.now();
          if (time % 2 == 0) {
            resolve(time + "it is ok");
          } else {
            reject(time + "it maybe have not good");
          }
        }, 1000);
      });
      p.then(
        (value) => {
          console.log(value);
        },
        (resonal) => {
          console.log(resonal);
        }
 		);

请添加图片描述

代码解释

p封装一个包含异步操作，通过reject()和resolve()用来存储数据向p.then()

发送数据。

p.then()通常有两个回调函数，第一个是成功的回调函数，第二个是失败的回调函数

可简写为

p.then(
    	//value是resolve()里面的值
    	//如果传入的参数为 非Promise类型的对象则这个值就是他的本身
    	//如果是Promise类型的对像 他的参数结果决定了value的值
        (value) => {
          console.log(value);
        },
    	//resonal是reject()里面的值跟上面的一样
        (resonal) => {
          console.log(resonal);
        }
 	);

2.3链式调用

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            return new Promise((resolve, reject) => {
                resolve("success");
            });
        }).then(value => {
            console.log(value);
        },resolve=>{}).then(value => {
            console.log(value);
        },resolve=>{})

请添加图片描述

**类似与p.then(….).then(…).then(….) .then()返回的值取决与前面reject(….)和teject(…)**中的值

3.为什么要使用Promise

3.1使用Promise使用回调函数的方式更加灵活

在之前的回调函数中，只能在启动异步任务的前面
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函
数(甚至可以在异步任务结束后指定/多个)

3.2回调地狱

请添加图片描述

问题就是回调函数异步执行的结果是嵌套的回调执行的条件
不便于阅读，不便于异常处理

4.Promise的API

4.1Promise.resolve()

let p1 = Promise.resolve(521);
//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
  //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
            // resolve('OK');
            reject('Error');
        }));
        // console.log(p2);
        p2.catch(reason => {
            console.log(reason);
        })

请添加图片描述

4.2Promise.reject()

let p3 = Promise.reject(new Promise((resolve, reject) => {
            resolve('OK');
        }));
 console.log(p3);

Promise.reject()等到值为失败

4.3Promise.all([….])

Promise.all([…])需要一个参数，是一个数组。通常由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);

在这里插入图片描述

4.4Promise.race([…])

必须要有一个参数，为数组，由一个或多个组成，跟前面的效果类似。

但是一旦有任何一个成功了，则结果就出来了，不在接下来的运行。

就像一个竞赛

let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        })
        let p2 = Promise.resolve('Success');
        let p3 = Promise.resolve('Oh Yeah');

        //调用
        const result = Promise.race([p1, p2, p3]);

        console.log(result);