陌上人如玉
公子世无双

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


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

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

准备工作

  1. 上一次我们用axios来实现ajax请求,因为axios也是返回的promise,可能有人会产生误导,这次我们用Jquery来实现ajax请求
  2. 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”,有以下场景可能会用到

  1. 当在处理图片懒加载的时候,
  2. 图片过大,可能加载失败
  3. 页面图片过多(页面就是由图片堆起来的)通过图片的加载,来实现加载的进度条。

定时器

我想定时器就没有必要通过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的常用内容介绍

赞(0) 打赏
未经允许不得转载:陌上寒 » javascript异步之Promise.resolve()、Promise.reject()

评论 1

  1. #-49

    写java 还是很厉害的了

    搜程快排系统6年前 (2018-12-29)回复

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

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

微信扫一扫

支付宝扫一扫