promise

于 2022-03-10 13:16:33 发布
阅读量266 收藏
点赞数
分类专栏： VUE 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/123365689
版权

promise

1、什么是promise?

在这里插入图片描述

2、网络请求的回调地狱

在这里插入图片描述

3、Promise的基本使用1

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
<script>
  //什么情况下会用到Promise?
  // 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
  // new ->构造函数（1、保存了一些状态信息 2、执行传入的函数）
  // 在执行传入的回调函数时，会传入两个参数，resolve，reject,本身又是喊出
  new Promise((resolve,reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      resolve('Hello World')
      // 失败的时候调用reject
      // reject('err message')
    }, 1000)
  }).then((data)=>{
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  }).catch((err)=>{
    console.log(err);
    console.log(err);
    console.log(err);
    console.log(err);
    console.log(err);
  })
</script>
</body>

</html>

4、Promise的三种状态

在这里插入图片描述
在这里插入图片描述

5、Promise的基本使用2

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
<div id="app">

</div>

<script>
  new Promise((resolve,reject)=>{
    // resolve('Hello world');
    reject('hello vue');
  }).then(data =>{
    console.log(data);
  },err=>{
    console.log(err);
  })
</script>
</body>

</html>

6、Promise的链式调用

在这里插入图片描述

6.1、Promise的链式调用一

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
  </div>

  <script>
    // 参数 -> 函数(resolve,reject)
    // resolve,reject本身又是函数
    // 链式编程
    new Promise((resolve,reject)=>{
      // 第一次网络请求
      setTimeout(() => {
        resolve()
      }, 1000)

    }).then(()=>{
      // 第一次拿到结果处理的代码
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');
      console.log('Hello world');

      return new Promise((resolve,reject)=>{
        // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000);
      })
      }).then(()=>{
        // 第二次拿到结果处理的代码
        console.log('Hello vue');
        console.log('Hello vue');
        console.log('Hello vue');
        console.log('Hello vue');
        console.log('Hello vue');

        return new Promise((resolve,reject)=>{

          // 第三次网络请求的代码
          setTimeout(()=>{
            resolve()
          },1000)
        })
      }).then(()=>{
        // 第三次拿到结果处理的代码
        console.log('Hello python');
        console.log('Hello python');
        console.log('Hello python');
        console.log('Hello python');
        console.log('Hello python');
    })
  </script>
</body>

</html>

在这里插入图片描述

6.2、Promise的链式调用二（简写方式）

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
  </div>

  <script>
    // 网路请求：aaa -> 自己处理（10行）
    // 处理：aaa111 -> 自己处理（10行）
    // 处理：aaa111222 -> 自己处理

    //1、写法一：Promise((resolve,reject)=>{})
    // new Promise((resolve,reject)=>{
    //   setTimeout(()=>{
    //     resolve('aaa');
    //   },1000)
    // }).then(res=>{
    //   // 1、自己处理10行代码
    //   console.log(res,'第一层的10行处理代码');

    //   // 2、对结果进行第一次处理
    //   return new Promise((resolve,reject)=>{
    //    resolve(res + '111')
    //   })
    // }).then(res=>{
    //   console.log(res,'第二层的10行代码处理');

    //   return new Promise(resolve=>{
    //     resolve(res + '222')
    //   })
    // }).then(res=>{
    //   console.log(res,'第三层的10行处理代码')
    // })

     // 2、new Promise(resolve => resolve(结果))简写
      // new Promise((resolve,reject)=>{
      //   setTimeout(()=>{
      //     resolve('aaa');
      //   },1000)
      // }).then(res=>{
      //   // 1、自己处理10行代码
      //   console.log(res,'第一层的10行处理代码');

      //   // 2、对结果进行第一次处理
      //   return Promise.resolve(res + '111')
      
      // }).then(res=>{
      //   console.log(res,'第二层的10行代码处理');

      //   return Promise.resolve(res+222)
      // }).then(res=>{
      //   console.log(res,'第三层的10行处理代码')
      // })


      // 3、省略掉Promise.resolve
		new Promise((resolve, reject) => {
		   setTimeout(() => {
		     resolve('aaa')
		   }, 1000)
		 }).then(res => {
		   // 1.自己处理10行代码
		   console.log(res, '第一层的10行处理代码');
		
		   // 2.对结果进行第一次处理
		   return res + '111'
		 }).then(res => {
		   console.log(res, '第二层的10行处理代码');
		
		   return res + '222'
		 }).then(res => {
		   console.log(res, '第三层的10行处理代码');
		 })
  </script>
</body>

</html>

在这里插入图片描述

6.3、Promise的链式调用处理异常的两种写法

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
  </div>

  <script>
      // 4、网络异常时的处理
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('aaa');
        },1000)
      }).then(res=>{
        // 1、自己处理10行代码
        console.log(res,'第一层的10行处理代码');

        // 2、对异常结果进行处理(方式一)
        return Promise.reject('err message')
        // 对异常结果进行处理(方式二)
        throw 'err message'
      
      }).then(res=>{
        console.log(res,'第二层的10行代码处理');

        return Promise.resolve(res + '222')
      }).then(res=>{
        console.log(res,'第三层的10行处理代码')
      }).catch(err=>{
        console.log(err);
      })
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

7、Promise的all方法的使用

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
  <div id="app">
  </div>

  <script>
   Promise.all([
    new Promise((resolve,reject)=>{
       setTimeout(() => {
         resolve({name:'why',age:18})
       }, 1000);
    }),
    new Promise((resolve,reject)=>{
      setTimeout(() => {
        resolve({name:'kobe',age:42})
      }, 1000);
    })
   ]).then(results=>{
     console.log(results);
   })
  </script>
</body>

</html>

在这里插入图片描述

小码哥呀
关注
专栏目录
promise.pdf
05-30
Promise是ES6规范中新增的一种技术，用于处理JavaScript中的异步编程。它提供了一种更加优雅和强大处理异步操作的方式，是异步编程领域的一个重要概念。 Promise对象代表了一个尚未完成但预期在未来某个时刻会完成...
Promise
01-08
Promise 是异步编程的一种解决方案，提供了原生的Promise对象。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 //通过new方法创建一个Promise对象，里面有两个参数，分别为...
JS中promise化微信小程序api
10-18
通过使用Promise化微信小程序API，开发者可以将异步的API调用转化为返回Promise对象的函数调用，使得代码的异步逻辑更接近于同步代码的书写方式，大大提高了代码的可读性和可维护性。 在微信小程序中，使用Promise...
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
promise.md
06-03
promise.md记载了promise的规范 它是一套异步操作处理机制， [Promise A+](https://promisesaplus.com/) 是规范，jQuery、ES2015、q的promise都是对该规范的一种实现.
Promise用法
01-08
promise是个构造函数对象，解决了回调问题，它有三种状态，pending(等待态)，fulfiled(成功态)，rejected(失败态)，常用到的方法则有 then，catch，all，race promise是用来解决两个问题的： 回调地狱，代码难以维护...
深入理解Promise.all
10-18
Promise.all是JavaScript中用于处理多个异步操作的技术之一，它允许我们将多个Promise实例包装成一个Promise实例，只有所有的Promise都成功解决（resolve）了，才会将结果作为数组返回；如果有任何一个Promise被拒绝...
Promise.js
06-19
手动实现promise的功能， 只能保证功能相同。用于来更加深刻的理解promise，由于es6是官方提出的一个新的概念，每家浏览器厂商实现的底层原理都不一样，所以这个实现的只是模拟用来练习的。更加理解promise，和养成...
promise详解
03-09
关键词：Promise，resolve，reject，Prepending，Resolve，Reject，then，catch，all，race
ES6手写Promise
最新发布
08-08
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰,同时使用queueMicrotask 来排队执行，确保处理微任务逻辑的正确性
promise-1.0.0.js
12-01
Promise是JavaScript中的一个核心特性，尤其在ES6中被广泛使用，用于处理异步操作。Promise代表了可能尚未完成但最终会完成的异步操作的结果。这个"promise-1.0.0.js"文件可能是Promise的一个早期实现，稳定版本...
promise:一个简单的es6 promise的polyfill
04-30
Promise是ES6引入的一种异步编程解决方案，它用于解决传统的回调函数地狱问题，提供了一种更优雅的方式来管理和处理异步操作。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。当...
JavaScript中的Promise使用详解
10-24
JavaScript中的Promise对象是用于处理异步操作的一种机制，它解决了传统的回调函数模式所带来的"回调地狱"问题，使得异步代码的编写更加清晰和易于管理。Promise有三种状态：Pending（待定）、Rejected（拒绝）和...
promise的学习总结
09-08
Promise的学习总结
AngularJS中的promise用法分析
10-19
AngularJS中的Promise用法分析涵盖了多个知识点，包括Promise的基本概念、在AngularJS中的具体实现方式以及如何在实际编程中应用。Promise是JavaScript中用于处理异步编程的一种模式，它解决了回调函数嵌套过深的...
promise.js
09-08
Promise.js 是一个JavaScript库，专门用于处理异步编程中的回调地狱问题。它的核心是Promise对象，这个对象代表了可能还未完成但最终会完成的异步操作。Promise.js 的设计目标是提供一种更优雅的方式来组织复杂的...
filereader与promise封装使用.html
10-03
Filereader与Promise的搭配使用/JavaScript异步回调函数返回值 完美解决！！！！！！！ 工作中项目需求：读取用户上传的Excel文件，并将Excel转换为json数据格式，然后上传至后台数据库。 问题点：Filereader中new ...
Promise.rar
07-02
在JavaScript的世界里，Promise是异步编程的一种解决方案，它为处理异步操作提供了一种更加优雅的方式，使得代码更加可读、可维护。本压缩包文件"Promise.rar"中的内容，很显然，围绕着Promise的基础知识、使用方法...
理解JavaScript中的Promise
"这篇资源主要介绍了JavaScript中的Promise概念及其应用，旨在帮助读者理解并掌握Promise在处理异步操作中的重要性。" 在JavaScript中，由于其单线程的执行机制，所有的任务都会按照顺序依次执行，这就导致了当涉及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值