js中promise的使用

已于 2022-11-14 16:39:28 修改
阅读量283 收藏
点赞数
文章标签： js javascript prototype payment vue
于 2021-08-11 11:30:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45393395/article/details/120564677
版权 
<!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>
        var arr = [1,2,3,4,5];
        arr.forEach((item)=>{
            console.log('settimeout之前');
            setTimeout(function(){
            console.log(item);
            },3000);
            console.log('settimeout之后');
        })
        console.log('promise');
    </script>
</body>
</html>
//index.html:13 settimeout之前
//index.html:17 settimeout之后
//index.html:13 settimeout之前
//index.html:17 settimeout之后
//index.html:13 settimeout之前
//index.html:17 settimeout之后
//index.html:13 settimeout之前
//index.html:17 settimeout之后
/index.html:13 settimeout之前
//index.html:17 settimeout之后
//index.html:19 promise
//index.html:15 1
//index.html:15 2
//index.html:15 3
//index.html:15 4
//index.html:15 5




 <script>
        try {
          let data ;
          console.log(data.a);
      } catch (error) {
          console.log(error);
      }
    </script>





 <script>
        try {
            let data = "errorData";
            throw new Error(data);
            console.log('data是否继续执行');
        } catch (error) {
            console.log('输出data错误信息');
            console.log(error);
        }
        try {
            let data1 = "errorData1";
            throw (data1);
            console.log('data1是否继续执行');
        } catch (error) {
            console.log('输出data错误信息');
            console.log(error);
        }
    </script>
//index.html:18 输出data错误信息
//index.html:19 Error: errorData
//    at index.html:15
//index.html:26 输出data错误信息
//index.html:27 errorData1


       let promise = new Promise((resolve,reject)=>{
            console.log('进入promise');
            let data = 'promsie-data';
            resolve(data);
            // reject(data);
            console.log('resove和reject之后');
        }).then((res)=>{
            console.log('resolve');
            console.log('进入then');
            console.log(res);
            console.log('返回res');
            return res;
        }).catch((err)=>{
            console.log('reject');
            console.log('输出catch')
            console.log(err);
            console.log('返回err');
            return err;
        });

        console.log('出了promsie');
        promise.then((res)=>{
            console.log('promise出来接着then');
            console.log(res);
        })
        console.log('结束');

    </script>
//index.html:14 进入promise
//index.html:18 resove和reject之后
//index.html:33 出了promsie
//index.html:38 结束
//index.html:20 resolve
//index.html:21 进入then
//index.html:22 promsie-data
//index.html:23 返回res
//index.html:35 promise出来接着then
//index.html:36 promsie-data




 <script>
        let promise = new Promise((resolve,reject)=>{
            console.log('进入promise');
            let data = 'promsie-data';
            // resolve(data);
            reject(data);
            console.log('resove和reject之后');
        }).then((res)=>{
            console.log('resolve');
            console.log('进入then');
            console.log(res);
            console.log('返回res');
            return res;
        }).catch((err)=>{
            console.log('reject');
            console.log('输出catch')
            console.log(err);
            console.log('返回err');
            return err;
        });

        console.log('出了promsie');
        promise.then((res)=>{
            console.log('promise出来接着then');
            console.log(res);
        })
        console.log('结束');

    </script>
//index.html:14 进入promise
//index.html:18 resove和reject之后
//index.html:33 出了promsie
//index.html:38 结束
//index.html:26 reject
//index.html:27 输出catch
//index.html:28 promsie-data
//index.html:29 返回err
//index.html:35 promise出来接着then
//index.html:36 promsie-data



Promise.all()
Promise.allSettled()
Promise.any()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.race()
Promise.reject()
Promise.resolve()
Promise.prototype.then()

<!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>
    (
      function (window) {

        function Promise(excutor) {
          const self = this;
          self.status = 'pending';
          self.data = undefined;
          self.callbacks = [];
          function resolve(value) {
            if (self.status !== 'pending') {
              return
            }
            self.status = 'resolved';
            self.data = value;
            if (self.callbacks.length > 0) {
              setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                  callbacksObj.onResolved(value);
                });
              });
            }
          }
          function reject(res) {
            if (self.status !== 'pending') {
              return
            }
            self.status = 'rejected';
            self.data = res;
            if (self.callbacks.length > 0) {
              setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                  callbacksObj.onRejected(value);
                });
              });
            }
          }
          try {
            excutor(resolve, reject);
          } catch (error) {
            reject(error);
          }
        }
        Promise.prototype.then = function (onResolved, onRejected) {
          onResolved = typeof onResolved === 'function' ? onResolved : value => value
          onRejected = typeof onRejected === 'function' ? onRejected : res => { throw res }
          const self = this;

          return new Promise((resolve, reject) => {
            function handle(callback) {
              try {
                const result = onResolved(self.data);
                if (result instanceof Promise) {
                  // result.then(value => {
                  //   resolve(value)
                  // }, res => {
                  //   reject(res)
                  // })
                  result.then(resolve, reject)
                }
                else {
                  resolve(result);
                }
              } catch (error) {
                reject(error)
              }
            }
            if (self.status === "pending") {
              self.callbacks.push({
                onResolved() {
                  handle(onResolved)
                }, onRejected() {
                  handle(onRejected)
                }
              })
            }
            if (self.status === "resolved") {
              setTimeout(() => {
                handle(onResolved)
              })
            }
            if (self.status === "rejected") {
              setTimeout(() => {
                handle(onRejected)
              })
            }
          })
        }
        Promise.prototype.catch = function (onRejected) {
          return this.then(undefined, onRejected)
        }
        Promise.resolve = function (value) {

        }
        Promise.reject = function (res) {

        }
        Promise.all = function (promises) {

        }
        Promise.race = function (promises) {

        }
        window.Promise = Promise;
      }
    )(window)
    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(2);
        console.log('reject');
      }, 100)
    }).then(value => {
      console.log('value', value);
      console.log('value');
    }, res => {
      console.log('res');
      console.log('res:', res)
    })
    // p.then(value => {
    //   console.log('value1', value);
    //   console.log('value1');
    // }, res => {
    //   console.log('res1:', res)
    // })
  </script>
</body>

</html>

promise+setTimeout调用

let p = new Promise(resolve => {
      setTimeout(function () {
      resolve('succ')
      },1000);
      console.log('conso');
      resolve('conso-----scc')
    },reject=>{
      reject('fail')
    });
    p.then((d)=>{
      alert(d);
    }).catch(e=>{
      console.log(e);
    })
百度一下吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
异步篇：识别Promise (方法之一)
显磊的博客
12-03 1382
如何确定一个值是不是真正的 Promis，或者这个值的行为是不是很类似 Promise ？Promise 是通过 new Promise(…) 创建，那么是不是可以用 instanceof Promise 来检查？ 一. 为什么 instanceof 不足以检查 Promise 原因有许多，总结如下： Promise 值可能是从其他浏览器窗口接收到的，然而接收到的 Promise 可能和当前窗口...
JavaScript中发出HTTP请求最常用的方法
明月如霜丶
01-10 3771
JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中，我们将介绍一些在JavaScript中发出HTTP请求的流行方法。 Ajax Ajax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据，并使用HTTP GET方法接收数据。我们来看看发送GET请求。我将使用JSONPlaceholder，这是一个免费的在线REST AP...
JS中的Promise（秒懂如何使用promise进行异步操作）
最新发布
百赢出品，必属精品
04-09 1791
JavaScript中的Promise是一种用于处理异步操作的对象，它代表了一个尚未完成但最终会完成或失败的操作，目的是更加优雅地书写复杂的异步任务。Promise 是一种用于处理异步操作的 JavaScript 对象，它提供了一种更清晰、更可靠的方式来管理异步代码。简化异步操作：Promise 可以帮助我们更轻松地处理异步操作，以及在操作完成后执行相应的逻辑。链式调用：通过使用 .then() 方法，我们可以将多个异步操作链接在一起，形成一个链式调用，使代码更加清晰易读。明确的状态变化。
【JavaScript】Promise 的使用
Superman_H的博客
03-16 3995
Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。
ES6中的Promise
Picking_up_stones的博客
03-22 642
最近看了下ES6中Promise对象的用法，觉得他是一个好东西，使代码的书写变得可读性更高，解决了在请求资源时，一个数据的获取要依赖上一个请求所获取的数据，如果不用Promise就会使代码嵌套看起来很复杂的问题，继而可读性，可维护性都会降低，然而用了Promise之后，代码逻辑顺序看起来就会很清晰。一. Promise的基本用法function getPromise(cont) { var
Vue- Promise函数---参数resolve(调用.then方法)-- 参数reject(调用.catch方法)---链式结构...
weixin_44438307的博客
10-04 111
结构： //什么情况下会用到Promise? //一把情况下是有异步操作时，使用Promise对这个异步操作进行封装 <script> new Promise((resolve, reject) =>{ setTimeout(() =>{ //成功的时候调用resolve resolve('成功data') //失...
手写promise原理系列七：封装Promise.reject方法，Promise.reject的用法
ThisEqualThis的博客
03-14 752
在上篇文章中我们知道了 Promise.resolve 的用法以及手动封装了 Promise.resolve 方法，这篇文章继续研究 Promise.reject 方法的用法以及手动封装一个 Promise.reject 方法。Promise.reject 方法接受一个参数，可以是 promise 对象，也可以是非 promise 对象的任意值。让我们开始吧，先看Promise.reject 的用法。
Promise深入理解（一）
QYDUAN的博客
09-09 944
Promise深入理解前言基本用法 前言 在异步编程中，Promise 扮演了举足轻重的角色，比传统的解决方案（回调函数和事件）更合理和更强大。有些朋友对于这个几乎每天都在打交道的“老朋友”，貌似全懂,但稍加深入就可能疑问百出，本文带大家深入理解这个熟悉的陌生人—— Promise. 基本用法 语法 new Promise( function(resolve, reject) {...} /* executor */ ) 构建 Promise 对象时，需要传入一个 executor 函数，主要业务
Promise构造函数的方法1:Promise.resolve()和Promsie.reject()
visibleforest的博客
08-06 3012
1.promise.resolve() 它是成功状态的Promsie的一种简写方式。 参数传递：（以下重点掌握一般参数的传递）： 1）一般参数和参数为空的情况下，直接返回一个resolved状态的Promise对象； 2）如果参数是Promise的实例，将不做任何修改、原封不动地返回这个实例； 3）如果参数是具有then方法的对象，Promise.resolve()会将这个对象转为Promise对象，并立即执行这个对象的then方法。 ps: 重视返回的Promise的状态对其后者执行的函数的影
ES6 Promise用法小结
小小前端攻城狮的博客
04-01 1230
什么是Promise呢？ ES6中一个非常重要和好用的特性就是Promise 但是初次接触Promise会一脸懵逼，这TM是什么东西？ 看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？ Promise是异步编程的一种解决方案。 那什么时候我们会来处理异步事件呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传
（基础）Promise类方法reject()使用
次顶级的博客
12-18 1万+
可直接返回失败的Promise对象
JavaScript中Promise的使用详解
10-20
Promise，相信每一个前端工程师都...ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。
JavaScript中的Promise使用详解
10-24
主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要的朋友可以参考下
理解JavaScript中Promise的使用
10-22
主要为大家介绍了JavaScript中Promise的使用，本文先介绍 Promises 相关规范，然后再通过解读一个迷你的 Promises 以加深理解，感兴趣的小伙伴们可以参考一下
【uniapp】promise中resolve()与reject()的用法
ONLYSRY的博客
09-22 4605
resolve(data)将这个promise标记为resolved，然后进行下一步then((data)=>{//do something})，resolve里的参数就是传入then的数据。当执行到 reject() 这个方法的时候，就改变 promise的状态为 reject，当promise为reject就可以.catch()这个promise了。执行到 resolve()这个方法的时候，就改变promise的状态为resolved，当状态为 resolved的时候就可以执行.then()
浅谈promise（then、catch、resolve、reject、race、all、done、finally）
momDIY的博客
09-05 2万+
Promise--抽象异步处理对象以及对其进行各种操作的组件 Constructor 构造函数 Instance Method 实例方法 Static Method 静态方法 关于then、catch、resolve、reject、race等方法、下边有代码示例...……^_^
ES6中的Promise以及应用
qq_43641110的博客
09-20 686
1. 认识promise 1.1 什么是Promise呢 Promise是异步编程的一种解决方案。 什么时候处理异步事件： 常见的场景是网络请求。 封装一个网络请求的函数，因为不能立即拿到结果，所以不能简单的将结果返回。 所以往往会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。 如果只是一个简单的网络请求，那么这种方案不会带来很大的麻烦。 但是，当网络请求非常复杂时，就会出现回调地狱。 1.2 网络请求的回调地狱 ...
js的promise用法
weixin_44992737的博客
07-29 6213
js的promise
js中的promise详解
热门推荐
zyf971020的博客
09-23 6万+
js中的promise详解
js中的promise使用举例
08-15
当我们需要进行异步操作时，可以使用Promise来处理异步操作的结果。下面是一个使用Promise的例子： ``` function fetchData() { return new Promise((resolve, reject) => { // 模拟异步操作 setTimeout(() => {...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

百度一下吧

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

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

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

打赏作者

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

抵扣说明：

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

余额充值