关于Promise

最新推荐文章于 2024-02-28 11:58:49 发布
最新推荐文章于 2024-02-28 11:58:49 发布
阅读量4.3k 收藏 5
点赞数 1
分类专栏： 造轮子 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59076775/article/details/122632865
版权

前言:

在Es6之前我门对异步操作，大多用的都是异步函数，那些属于异步的操作呢？ fs文件读取，数据库操作，AJAX,定时器。这些都属于异步。且看下图：

 可以看到：代码非常的乱，也不便于阅读。这个时候Promise就派上用场了,且往下看，接下来让我们一起探究Promise吧。

一.Promise是什么？

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

(2)Promise是一个构造函数

二.Promise的参数

(1)参数

  let p = new Promise((resolve, reject) => {

    }).then((res) => {}, rej => {})

resolve,reject代表成功，失败的函数，then里面的res和rej代表成功，失败的回调。

(2)代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">点击抽奖</button>

  <!-- 生成随机数 -->
  <script>
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1
    }
    // 点击按钮，2s后显示是否中奖(30%概率中奖)
    // 获取元素对象
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      // setTimeout(() => {
      //   let n = rand(1, 100)
      //   if (n <= 30) {
      //     alert(`恭喜中奖`)
      //   } else {
      //     alert(`再接再厉`)
      //   }
      // }, 1000);

      // 异步任务成功：
      // resolve 解决  函数类型的数据
      // 异步任务失败：
      // reject  拒绝  函数类型的数据
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          let n = rand(1, 100)
          if (n <= 30) {
            resolve(n) //将promise的状态设置成功
          } else {
            reject(n) //将promise的状态设置失败
          }
        }, 1000);
      })
      // 调用then方法
      p.then((res) => {
        alert(`恭喜中奖` + res)
      }, (res) => {
        alert(`再接再厉` + res)

      })
    })
  </script>

</body>

</html>

可以看出里面还可以传递参数。

三.Promise的状态

(1)三种状态

peanding 等待

fullfilled 成功

reject 失败

(2)只存在两种状态的转换

pending----------------resolved

peding---------------rejected

说明:只有这2种,且一个promise对象只能改变一次,无论变为成功还是失败，都会有一个结果数据。

四.Promise的工作流程图

 

五.Promise的api

(1)同步调用

代码:

<body>
  <script>
    let p = new Promise((resolve, reject) => {
     //同步调用
      console.log(`111`);
    })
    console.log(`222`);
  </script>

</body>

图:

 结论:说明里面的代码是同步执行的。

(2)then方法

1.代码

then((res)=>{  成功之后  },(err)=>{失败之后})

2.拿到成功之后的回到

3.拿到失败之后的回调

(2)catch方法

作用:只能指定失败之后的回调

代码:

 <script>
    let p = new Promise((resolve, reject) => {
      reject(`error`)
    })

    p.catch(res => {
      console.log(res);
    })
  </script>

(3)Promise.all方法

(1)组成:Promise组成的一个数组

(2)状态:如果数组里面的Promise都成功,返回的结果也是一个数组，失败就返回失败的结果。

(3)代码：

 <script>
    let p1 = new Promise((resovle, reject) => {
      resovle(`ok`)
    })
    let p2 = Promise.resolve(`SUCCESS`)
    let p3 = Promise.resolve(`Oh yeah`)
    const result = Promise.all([p1, p2, p3])
    console.log(result);
  </script>

图示：

 改变其中的一个状态为失败

    let p3 = Promise.reject(`Oh yeah`)

图示:

(4)Promise.race方法

结果:谁先改变状态就先执行谁

代码:

 let p1 = new Promise((resovle, reject) => {
      resovle(`ok`)
    })
    let p2 = Promise.resolve(`SUCCESS`)
    let p3 = Promise.resolve(`Oh yeah`)
    const result = Promise.race([p1, p2, p3])
    // p1先改变状态result的结果由p1来决定
    console.log(result);

图示：

 

六.Promise.resolve方法

1. 作用:快速得到一个Promise对象

2.代码:

    let p1 = Promise.resolve(521)
    console.log(p1);

图示：

 

3.任意类型都得到的是一个成功状态的Promise对象,哪怕是一个underfined

1.代码：

 <script>
    let p1 = Promise.resolve(undefined)
    console.log(p1);
  </script>

图示：

 

4.如果传入的是一个Promise对象

  <script>
    let p1 = Promise.resolve(
      new Promise((resolve, reject) => {
        reject('error')
      })
    )
    console.log(p1);
  </script>

图示：

 

七.Promise.reject方法

1.作用:返回一个失败的Promise对象

2.代码：

  let p = Promise.reject(521)
    console.log(p);

图示:

 3.无论如何传入的都是一个失败的状态，即使传入的是一个成功的promise对象

图示：

 八.改变状态

1.peading---------------->resolve

代码：

  let p = new Promise((resolve, reject) => {
      resovle(`ok`)
    })
    console.log(p);

2.peading----------------->reject

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

3.通过throw，peading----------------->reject

let p = new Promise((resolve, reject) => {
      throw `出现错误`
    })
    console.log(p);

图示：

 

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

 （1） 执行器函数为同步任务 ------------------->先改变状态

<script>
    let p = new Promise((resolve, reject) => {
      resolve('ok')
    })
    p.then(res => {
      console.log(res);
    })
  </script>

（2） 执行器函数为异步任务----------------->先执行回调函数

 <script>
    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok')
      }, 2000);
    })
    p.then(res => {
      console.log(res);
    })
  </script>

十.then方法

（1）如果是一个非Promise则结果是一个成功的promise。

  代码：

  let p = new Promise((resolve, reject) => {
      resolve('ok')
    })
    let p1 = p.then(res => {
      return 520
    })
    console.log(p1);

图示：

(2)如果是一个promise对象

代码：

<script>
    let p = new Promise((resolve, reject) => {
      resolve('ok')
    })
    let p1 = p.then(res => {
      return new Promise((resolve, reject) => {
        resolve('success')
      })
    })
    console.log(p1);
  </script>

图示：

如果是抛出一个错误 返回的是错误的对象  

（3）串连多个任务

输出是underfined，虽然没有返回的结果,但是返回的是一个成功的promise，且是一个成功的underfined 。   

十一.中断promise链的方法

有且只有一种方法，返回一个peading状态的对象

十二.async函数

1.用async修饰的函数是一个Promise对象

async function main() {
         
    }
    let res = main()
    console.log(res)

 图示:

 2.如果返回的不是一个Promise对象，Promise对象的结果由async函数执行的返回值决定 。

代码：

 <script>
    async function main() {
      return 521
    }
    let res = main()
    console.log(res)
  </script>

图示：

3. 如果返回的是一个Promise对象。

代码：

 async function main() {
      return new Promise((resolve, reject) => {
        resolve('ok')
      })
    }
    let res = main()
    console.log(res);

图示：

 

十三.await函数

1.await右侧的表达式一般为promise对象，但也可以是其它的值

2.如果表达式是promise对象，await返回的是promise成功的值

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

4.await必须写在async函数中,但async函数中可以没有await

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

6.实际应用

 读取文件

 发AJAX请求

 7.如果表达式是promise对象，await返回的是promise成功的值

代码：

 <script>
    async function fn() {
      return 521
    }
    async function main() {
      let a1 = await fn()
      console.log(a1);
    }
    main()
  </script>

  图示：

 

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

代码：

   async function fn() {
      return 521
    }
    async function main() {
      let a1 = await 100
      console.log(a1);

    }
    main()

图示：

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    async function main() {
      try {
        let a1 = await Promise.reject(2)
        console.log(a1);
      } catch (e) {
        console.log(e);
      }
    }
    main()
  </script>

</body>

</html>

图示:

 

如果决定要走又何必挽留
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6关于Promise的用法详解
12-03
Node的产生，大大推动了Javascript这门语言在服务端的发展，使得前端人员可以以很低的门槛转向后端开发。 当然，这并不代表迸发成了全栈。全栈的技能很集中，绝不仅仅是前端会写一些HTML和一些交互，后台熟悉数据库的增删查改。 想必接触过Node的人都知道，Node是以异步(Async)回调著称的，其异步性提高了程序的执行效率，但同时也减少了程序的可读性。如果我们有几个异步操作，并且后一个操作需要前一个操作返回的数据才能执行，这样按照Node的一般执行规律，要实现有序的异步操作，通常是一层加一层嵌套下去。 为了解决这个问题，ES6提出了Promise的实现。 含义 Promise 对象用
理解promise 与async await的用法
weixin_47438917的博客
11-16 199
async/await 是一种基于 Promise 之上的语法糖，比 Promise 的写法更像是同步操作。首先，我们会使用 async 关键字将函式标记为异步函式，异步函式就是指返回值为 Promise 物件的函式。在异步函式中我们可以调用其他的异步函式，不过不是使用 then()，而是使用 await 语法，await 会等待 Promise 完成之后直接返回最终的结果。async/await的作用就是将异步逻辑，转化为同步的顺序来书写，以下代码resolve('开车去超市')}, 2000)
javascript基础学习系列一百六十九：Promise.race()
最新发布
m0_68635815的博客
02-28 233
Promise.race()静态方法返回一个包装期约，是一组集合中最先解决或拒绝的期约的镜像。Promise.race()不会对解决或拒绝的期约区别对待。如果有一个期约拒绝，只要它是第一个落定的，就会成为拒绝合成期约的理由。之后再拒绝的期约 不会影响最终期约的拒绝理由。不过，这并不影响所有包含期约正常的拒绝操作。
ES6-22【手写实现之 Promise】
Yesterday_Tomorrow的博客
12-06 291
一.promise总结 promise是一个容器 保存着某个未来才会结束的事件的结果 从语法上说，promise是一个对象 可能是成功的结果，也可能是失败的结果 二.基础Promise实现 function Promise(fn) { var callback = ''; this.then = function (cb) { console.log(cb); callback = cb;
关于Promise 异步编程的实例讲解
01-19
实例如下所示： //1.解决异步回调问题 //1.1 如何同步异步请求 //如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务，无法实现并行节约时间 const fs = require('fs'); let school = {}; fs.readFile('./name.txt','utf8',function (err,data) { school.name = data; }); fs.readFile('./age.txt','utf8',function (err,data) { school.age = data; }); conso
promise:Python 中的超高性能 Promise 实现
05-30
承诺 这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容 安装 $ pip install promise 用法 下面的示例显示了如何加载 Promise 库。 然后它演示了从头开始创建一个 promise。 您只需调用Promise(fn) 。 在有一个关于这个方法返回什么的完整规范。 from promise import Promise promise = Promise ( lambda resolve , reject : resolve ( 'RESOLVED!' ) ) 应用程序接口 在所有示例之前，您将需要： from promise import Promise 承诺（解析器） 这将创建并返回一个新的
Promise基础（下）
weixin_54685571的博客
04-16 7037
1. 初始结构搭建 //Promise.html文件 <script src="./Promise.js"></script> <script> let P = new Promise((resolve, reject) => { resolve("OK"); }); P.then( (value) => { console.log(value); },
vue 函数（三）：Promise函数
w_t_y_y的博客
09-13 8277
一、介绍： 通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。 二、用法： created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.
对Promise的理解以及Promise的基本用法
小草莓的博客
07-18 3065
一、理解Promise ① 定义 ② 优点 ③ 特点 ④ 缺点 二、Promise基本用法 ① resolve函数的作用 ② reject函数的作用 ③ then方法 ④一个异步加载图片的例子 三、Promise的其他常见方法 ①Promise.prototype.then() ②Promise.prototype.catch() ③Promise.prototype.finally() ④Promise.all() ⑤Promise.race() 四、
ES6---new Promise()使用
低调哥的博客
11-24 5374
ES6---new Promise()使用 1、使用then的回调，避免传统方法需要传回调参数 //传统写法 const fn = (flag,callback) => { const data = '123456' if(flag){ callback && callback(data) } } fn(true,(data) => { console.log('fn方法里的data',data) //打印结果 123456...
Promise-异步回调
qq_43667537的博客
03-05 2169
Promise作为一个构造函数，在实例化一个对象过程中，接受一个参数，这个参数是一个函数类型的值，这个函数里面有两个参数，分别是resolve、reject，当异步任务执行成功的时候，调用resolve函数，将promise对象的状态修改为resolved，并将异步操作的结果作为参数传递出去；④当异步任务执行失败的时候，调用reject函数，将Promise对象的状态修改为rejected，然后调用then方法中的第二个回调函数，并返回一个新的Promise对象。
有关Promise
xch____的博客
04-12 1231
1、promise的语法 const p = new Promise((resolve,reject )=>{ // resolve() //调用函数 调用以后当前promise对象的状态变成了fulfilled // reject() // 调用以后状态变成了rejected }) console.log(p) //状态默认是pending 2、promise的状态 promise实例有两个属性， 1.state（状态） 2.resu...
promise，return解析
weixin_39308542的博客
10-27 7545
希望在promise中return结果 function fun() { return new Promise((resolve, reject) => { resolve('模拟axios') }) } function test() { return fun().then(res => { console.log('1,',res) return 1 }).then(res => { console.
Promise理解
qq_59076775的博客
04-26 889
Promise是一个构造函数,里面有三种状态peading，fulfilled,reject也就是等待,成功,失败这三个状态。 1.等待状态 const p1 = new Promise((resolve, reject) => { // 成功的时候 可以调用 resolve()方法 // 失败的时候 可以调用 reject()方法 }) console.log(p1) 可以看出在里面什么都没有干,此时就是一个等待的Promise状态。 2.成功的状态 co
【ES6】Promise
在热爱技术的路上一直前行。
04-26 2032
一、概述 Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。 解读： （1）当在setTimeout中使用resolve（）方法的时候，会调用p.then方法中的第一个回调函数； （2） 当在setTimeout中使用reject（）方法的时候，会调用p.then方法中的第二个回调函数； 二、应用实例 1、使用Promise封装读取.md后缀的文件 2、使用Promise封装Ajax请求 ...
初学Promise笔记
qq_45589889的博客
11-13 277
函数 -> 函数（resolve, reject) resolve, reject 本身他们又是函数 链式编程 <script> // 函数 -> 函数（resolve, reject) // resolve, reject 本身他们又是函数 // 链式编程 new Promise((resolve, reject) => { // 第一次网络请求 setTimeout(() => { resolv
如何将Promise.then中的值直接return出来
m0_55686930的博客
10-19 3695
Promise 如何返回值，而不是返回 Promise 对象。实际开发中使用封装好的异步请求函数，为什么调用该函数返回的值一直都是 undefined。同步和异步的问题，「无法在当前获得未来的值」。
JavaScript-Promise
apple_53406386的博客
03-20 1091
JavaScript中Promise对象用来传递异步操作的消息。 生命周期 Promise共有两种生命周期： 1、pending（进行中）-此时代码执行尚未结束 2、settled（已处理）-代码执行结束。settled又分为两种情况： （1）fulfilled（已完成）-异步代码执行成功 （2）rejected（已拒绝）-异步代码执行失败 创建未处理的Promise new Promise( (resolve,reject)=>{} ); resolve、reject
【ES6】Promise 对象
Dora_5537的博客
05-06 249
参考资料：阮一峰老师《ES6》电子书 一、Promise 的含义 1. Promise 是异步编程的一种解决方案。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 2.Promise，简单来说就是一个容器，里面保存着（通常是）一个异步操作的结果。 3.Promise对象有以下两个特点： （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态...
js关于 Promise 案例
03-26
以下是一个Promise的案例，包括使用Promise封装一个异步函数，并在其中添加resolve和reject的处理流程，最后调用该函数并处理其返回结果： ``` function fetchData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function() { if (xhr.status === 200) { resolve(xhr.response); } else { reject(new Error(`Request failed. Status code: ${xhr.status}`)); } }; xhr.onerror = function() { reject(new Error('Request failed. Network Error.')); }; xhr.open('GET', url, true); xhr.send(); }); } fetchData('https://jsonplaceholder.typicode.com/todos/1') .then(data => { console.log(data); }) .catch(error => { console.error(error); }); ``` 这个案例的作用是从一个URL中获取数据，如果成功则resolve返回数据，如果失败则reject返回错误信息。在调用fetchData函数时，我们通过then方法对Promise进行处理，如果成功则将返回的数据打印到控制台，如果失败则将错误信息打印到控制台。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值