javascript异步之Promise.resolve()、Promise.reject()-陌上寒

我们上次讨论了Promise.all()、Promise.race()、Promise.finally()
今天我们继续讨论Promise的两个常用API

可以这么说，resolve和reject撑起了Promise的半边天，我们平时用的最多的就是这两个API

准备工作

上一次我们用axios来实现ajax请求，因为axios也是返回的promise，可能有人会产生误导，这次我们用Jquery来实现ajax请求
mock配置接口，用来模拟后台接口

resove()和reject()

我们知道Promise是一个构造函数，用来实例化一个Promise实例，
这个Promise构造函数，用一个函数来作为参数
这个作为参数的函数又有两个参数
第一个参数是resolve
第二个参数是reject
当然这两个参数都不是必填项

Promise有三个状态：等待，成功，失败
异步是一个耗时的过程，当在执行异步的时候，就是Promise的等待过程
当异步函数执行完，
如果异步执行成功，我们就调用resolve，将等待切换到成功
如果异步执行失败，我们就调用reject，将等待切换到失败
（类似于，有个判断，如果成功就执行resolve，如果失败就执行reject，需要我们手动切换）
过程不可逆，失败就是失败，不会再变，反之亦然
我们先看下mock的数据

{
  "success":true,
  "data": {
    "name": "这是接口一的返回值"
  }
}

再来看下我们的代码栗子：

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

<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>promise</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <script>
    window.onload = () => {
      new Promise((resolve, reject) => {
          $.ajax({
            url: "https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1",
            success: ({
              data,
              success
            }) => {
              if (success) {
                resolve(data)
              } else {
                reject(data)
              }
            }
          });
        })
        .then(res => {
          console.log(res);
        })
    }
  </script>
</body>

</html>

Jquery请求后台接口，如果返回的值是成功的，是我们想要的，就把data作为参数传递给resolve，然后就会执行then方法，最后输出

//=>{name: "这是接口一的返回值"}

有几点要声明
resolve, reject是形参，不是必须这么写
如下写法也可以

//省略。。
  new Promise((aaa, bbb) => {
//省略。。
 if (success) {
     aaa(data)
 } else {
     bbb(data)
 }
//省略。。

关于resolve和reject的参数介绍可以参考《ECMAScript 6 入门》，不再此赘述

使用场景

异步都可以使用Promise进行包装
ajax请求，图片加载
定时器
UI交互（点击事件等）

ajax请求

上面介绍了Promise的ajax请求的实现

图片加载

      new Promise((resolve, reject) => {
        const url ='http://www.qdtalk.com/wp-content/uploads/2018/11/bryan-goff-528709-unsplash-1.jpg'
        const image = new Image();
        image.onload = () => {
          resolve(image);
        };
        image.onerror = () => {
          reject(new Error("图片加载失败"));
        };
          //对image添加一些属性
        image.src = url;
        image.alt = '这是陌上寒个人博客的banner';
      }).then(res=>{
        console.log('图片加载成功，即将返回一个图片dom');
        console.log(res);//=>  <img src="http://www.qdtalk.com/wp-content/uploads/2018/11/bryan-goff-528709-unsplash-1.jpg" alt="这是陌上寒个人博客的banner">

      })

这个栗子有点“hello world”，有以下场景可能会用到

当在处理图片懒加载的时候，
图片过大，可能加载失败
页面图片过多（页面就是由图片堆起来的）通过图片的加载，来实现加载的进度条。

定时器

我想定时器就没有必要通过Promie包装了，因为它本身就有一个回调函数

      setTimeout((a, b) => {
        console.log(a);//=>第一个参数
        console.log(b);//=>第二个参数
      }, 1000, '第一个参数', '第二个参数');

所以说用Promise包装定时器意义不大

UI交互

我们举一个常用的栗子=>模态框

当我触发某一个动作的时候，会弹出这个模态框，当你点击了确定或者取消都会进行与之相关的操作，我们在这里应用了Promise进行包装
代码如下,重点看js代码

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

<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>promise</title>
  <link rel="stylesheet" href="https://qdtalk.com/weixin/style1229.css">
</head>

<body>
  <button id="myBtn">出现弹窗</button>

  <div class="modal-wap">
    <header>标题</header>
    <article>
      这是内容
    </article>
    <footer>
      <button id="confirm">确定</button>
      <button id="cancel">取消</button>
    </footer>
  </div>
  <script>
    function dom$(id) {
      return document.getElementById(id);
    }

    function modelFun() {
      return new Promise((resolve, reject) => {
        dom$('confirm').onclick = () => {
          resolve()
        }
        dom$('cancel').onclick = () => {
          reject()
        }
      })
    }
    dom$('myBtn').onclick = () => {
      document.querySelector('.modal-wap').style.display = 'block'
      modelFun().then(() => {
          console.log('你点击了确定');
        }, () => {
          console.log('你点击了取消');
        })
        .finally(() => {
          document.querySelector('.modal-wap').style.display = 'none'
        })
    }
  </script>
</body>

</html>

相信你的眼光，这是一个很漂亮的模态框！😂

点击“出现弹窗”按钮，出现模态框，模态框有两个按钮，取消和确定
我们对这个模态框进行了包装，如果点击了确定就执行resolve，如果点击了取消就执行reject,然后就会执行then方法
then方法，不是我们今天要介绍的内容，简单说：它也有两个参数，一个是resolve，另一个是reject
点了不同的按钮，执行了不同的事件
最后执行finally，不管是点击了取消还是确定，只要状态切换，都会关闭模态框
easy
以上就是关于resolve和reject的常用内容介绍

javascript异步之Promise.resolve()、Promise.reject()

准备工作

resove()和reject()

使用场景

ajax请求

图片加载

定时器

UI交互

相关推荐

置顶推荐

最新评论

活跃读者

网站统计

觉得文章有用就打赏一下文章作者

非常感谢你的打赏，我们将继续给力更多优质内容，让我们一起创建更加美好的网络世界！

微信扫一扫

支付宝扫一扫