Promise异步编程

已于 2023-04-27 12:38:26 修改
阅读量795 收藏
点赞数 2
文章标签： javascript 开发语言 ecmascript
于 2023-04-23 14:35:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/130320193
版权

目录

一、Promise的含义

二、基本用法

三、reject的用法

四、执行顺序

五、  项目中使用promise获取后端数据

六、catch的用法

七、finally的用法

八、Promise.all()

九、Promise.all()有一个是失败

十、Promise.race()全部是成功

十一、Promise.race()有一个是失败

十二、Promise.resolve()

十三、Promise.reject()

十四、promise.try()

十五、Promise 封装ajax

一、Promise的含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

promise翻译： 许诺;承诺;答应;保证;使很可能;预示

二、基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

  const baseFun = () => {
    console.log(1)
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 1000)
    })
    promise.then((res) => {
      if (res.code === 200) {
        setTitle(res.data.title)
      }
    })
  }

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

三、reject的用法

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

  //reject的用法
  const baseRejectFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise.then(
      (res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      },
      (res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      }
    )
  }

四、执行顺序

Promise 新建后就会立即执行。

  //执行顺序
  const baseOrderFun = () => {
    const promise = new Promise(function (resolve, reject) {
      console.log('promise')
      resolve()
      console.log('promise2')

    })
    promise.then((res) => {
      console.log('resolved')
    })
    console.log('other')
  }

Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

五、项目中使用promise获取后端数据

  //项目中使用promise获取后端数据
  const baseApiFun = () => {
    Api.h5.userGetInfo({}).then((res) => {
      if (res.code === 200) {
        setTitle(res.data.nickname)
      }
  })

六、catch的用法

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

  //catch的用法
  const baseCatchFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise
      .then((res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      })
  }

一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

七、finally的用法

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

  //finally的用法
  const baseFinallyFun = () => {
    const promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    promise
      .then((res) => {
        if (res.code === 200) {
          setTitle(res.data.title)
        }
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      }).finally(() => {
        console.log('finally')
      })
  }

八、Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

  //Promise.all()
  const baseAllFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 1000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据2',
          },
          msg: '成功2',
        })
      }, 1000)
    })
    const promiseAll = Promise.all([promise1, promise2])
    promiseAll
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        if (res.code === 400) {
          setTitle(res.data.title)
        }
      })
  }

九、Promise.all()有一个是失败

  //Promise.all()有一个是失败
  const baseAllWithRejectFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据',
          },
          msg: '失败',
        })
      }, 1000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据2',
          },
          msg: '失败2',
        })
      }, 1000)
    })
    const promiseAll = Promise.all([promise1, promise2])
    promiseAll
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log('catch', res)
      })
  }

十、Promise.race()全部是成功

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

  const baseRaceFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 5000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据2',
          },
          msg: '成功2',
        })
      }, 1000)
    })
    const promiseRace = Promise.race([promise1, promise2])
    promiseRace
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log(res)
      })
  }

十一、Promise.race()有一个是失败

  //Promise.race()有一个是失败
  const baseRaceWithRejectFun = () => {
    const promise1 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            title: '通过resolve返回的数据',
          },
          msg: '成功',
        })
      }, 5000)
    })
    const promise2 = new Promise(function (resolve, reject) {
      setTimeout(() => {
        reject({
          code: 400,
          data: {
            title: '通过reject返回的数据2',
          },
          msg: '失败2',
        })
      }, 1000)
    })
    const promiseRace = Promise.race([promise1, promise2])
    promiseRace
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log('catch', res)
      })
  }

十二、Promise.resolve()

      //将现有对象转为 Promise 对象
      let promise = Promise.resolve(1)
      promise.then((res) => {
        console.log(res) //1
      })

十三、Promise.reject()

      //将现有对象转为 Promise 对象
      let promise = Promise.reject(1)
      promise
        .then((res) => {})
        .catch((res) => {
          console.log('catch', res) //catch 1
        })

十四、promise.try()

处于提案阶段，还没有实现

javascript - Promise.try is not a function - SegmentFault 思否

 

十五、Promise 封装ajax

XMLHttpRequest（XHR）对象用于与服务器交互

XMLHttpRequest.open() 方法初始化一个新创建的请求

XMLHttpRequest.send() 方法用于发送 HTTP 请求

当一个XMLHttpRequest请求完成的时候会触发load 事件

XMLHttpRequest - Web API 接口参考 | MDN

      const xhr = new XMLHttpRequest()
      xhr.open('post', 'http://yuying-api.xutongbao.top/api/light/user/captcha')
      xhr.send()
      xhr.addEventListener('load', (e) => {
        let res = JSON.parse(e.target.response)
        console.log(res)
        if (res.code === 200) {
          document.getElementById('img').innerHTML = res.data.captcha
        }
      })

<!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>
    <div id="img"></div>
    <script>
      const ajax = ({ method = 'get', url }) => {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest()
          xhr.open(method, url)
          xhr.send()
          xhr.addEventListener('load', (e) => {
            let res = JSON.parse(e.target.response)
            resolve(res)
          })
        })
      }
      ajax({
        method: 'post',
        url: 'http://yuying-api.xutongbao.top/api/light/user/captcha',
      }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          document.getElementById('img').innerHTML = res.data.captcha
        }
      })
    </script>
  </body>
</html>

开源项目地址：

https://github.com/xutongbao/learn-chatgpt

徐同保
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
简单实现异步编程promise模式
09-03
本篇文章主要介绍了异步编程promise模式的简单实现，并对每一步进行了分析,需要的朋友可以参考下
关于Promise 异步编程的实例讲解
08-29
下面小编就为大家带来一篇关于Promise 异步编程的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Promise原理及执行顺序
最新发布
weixin_55538192的博客
02-19 952
Promise 是 JavaScript 的一个内置对象，在语法上是一个构造函数，该构造函数只有一个参数，是一个函数。初始化时，这个函数在构造之后会直接被异步运行，所以称之为起始函数。起始函数包含两个参数： resolve 和 reject.resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，是成功时的回调；reject 是出现异常是调用的。
异步编程简介- promise
Q_QQ_QQ_Q的博客
05-24 737
异步编程历史前端异步编程经历callback、promise、generate、async/await几个阶段。目前在简单场景使用回调，步骤比较多的场景使用promise和async/await，generate昙花一现，由于其api不易理解并且不易于使用而很少使用。promise目的：异步编程解决回调地狱，让程序开发者编写的异步代码具有更好的可读性。promise规范规定了一种异步编程解决方案的API。规范规定了promise对象的状态和then方法。
【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序
二三的博客
09-23 6627
上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！
Promise执行顺序详解
qq_41409353的博客
03-08 2524
Promise 的执行顺序详解
异步编程——promise
weixin_30709635的博客
04-06 81
异步编程——promise 定义 Promise是异步编程的一个解决方案，相比传统的解决方法——回调函数，使用Promise更为合理和强大，避免了回调函数之间的层层嵌套，也使得代码结构更为清晰，便于维护。Promise 是一个对象，从他可以获取异步操作的消息，他也是一个容器，里面包含着事件结束之后要进行的操作。 特点 Promise对象有两个特点： 对象的状态不收外界干扰。Promise对象...
Promise/异步编程
qq_35270145的博客
11-10 174
Promise 是异步编程的解决方案，他代表承诺，便是一定会抛出两种状态，状态一经确定就不会改变 编译成功：resolve(value) 为（必选） 编译失败：reject(error) （可选） 使用Then 接收正确的抛出 Then 后面接 catch(function(error)){} （ 可以简写为function(){} ） 接受错误的信息的处理（ 但编译出错如果没有在Then 后面接 catch(function(error)) 页面会报错 ) 因为 Then 返回的是一个新的Pro
js代码-Promise 异步编程的一种解决方案
07-16
js代码-Promise 异步编程的一种解决方案
Promise异步函数顺序执行的四种方法
weixin_34019144的博客
08-24 7905
前几天遇到一个编程题，要求控制promise顺序执行，今天总结了一下这个至少有好四种方法都可以实现，包括promise嵌套，通过一个promise串起来，generator，async实现，以下逐一介绍。原题目如下： //实现mergePromise函数，把传进去的数组顺序先后执行， //并且把返回的数据先后放到数组data中 const...
异步处理--Promise
分享记录前端知识
07-19 1127
es6异步处理的通用模型以及promise API的深入理解
前端异步方案之Promise(附实现代码)
夕山雨的博客
11-16 2318
一、基本原理 一个Promise对象可以理解为这样一个状态机，它（通常）接收一个异步任务作为输入，然后去执行这个异步任务，根据异步任务的执行结果来改变自身的状态，并保留这个执行结果 。 这个状态机总共有三种状态：pending（异步任务执行中）、fullfilled（执行成功）和rejected（执行失败）。在异步任务执行完之前，状态机处于pending状态；一旦任务执行成功，状态就会转为full...
Promise讲解
06-17 506
一.什么是Promise? Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。 二.对于几种常见异步编程方案 先来回顾下我们经常用到的几种情况 1.回调函数 例子一： $.get(url,(data) =>{ console.log(data) }) //do something 例子二： call...
promise异步编程的解决方案，async/await实现原理
m0_70477767的博客
05-03 781
promise的用法 异步编程的解决方案 首先我们知道，由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。 举个栗子，有三个文件1.txt 2.txt 3.txt 分别是111 222 333，按顺序读取出数据 111=>222=>333，由于readFile读取文件是异步的，所以按照这个方式会导致顺序不一致 // 读取文件 1.txt fs.readFile('./files/1.txt','utf-8
异步编程Promise
qq_56668869的博客
07-13 148
异步编程Promise、任务的队列分类、事件循环
异步编程——Promise
一只比闪电瘦的程序熊
05-03 433
众所周知，promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 那么在开始说promise之前，我们先来聊聊异步编程。js单线程js语言执行环境是单线程的。
promise异步编程
09-08
Promise 是 JavaScript 中用于处理异步编程的一种对象，它允许你将异步操作的结果与回调函数关联起来。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 创建一个 Promise 对象的示例代码如下： ```javascript const promise = new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { const isSuccess = true; // 假设异步操作成功 if (isSuccess) { resolve('操作成功'); } else { reject('操作失败'); } }, 1000); }); ``` 使用 Promise 对象的示例代码如下： ```javascript promise.then((value) => { console.log(value); // 输出：操作成功 }).catch((error) => { console.log(error); // 输出：操作失败 }); ``` 你还可以使用 `async/await` 语法来更简洁地处理 Promise： ```javascript async function asyncFunction() { try { const value = await promise; console.log(value); // 输出：操作成功 } catch (error) { console.log(error); // 输出：操作失败 } } asyncFunction(); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值