原贴链接：javascript异步之resolve()、reject()
我们上次讨论了Promise.all()、Promise.race()、Promise.finally()

今天我们继续讨论Promise的两个常用API

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

准备工作

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

resolve()和reject()

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

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

  1. {
  2.   "success":true,
  3.   "data": {
  4.     "name": "这是接口一的返回值"
  5.   }
  6. }

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>promise</title>
  9.   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  11. </head>
  13. <body>
  14.   <script>
  15.     window.onload = () => {
  16.       new Promise((resolve, reject) => {
  17.           $.ajax({
  18.             url: "https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1",
  19.             success: ({
  20.               data,
  21.               success
  22.             }) => {
  23.               if (success) {
  24.                 resolve(data)
  25.               } else {
  26.                 reject(data)
  27.               }
  28.             }
  29.           });
  30.         })
  31.         .then(res => {
  32.           console.log(res);
  33.         })
  34.     }
  35.   </script>
  36. </body>
  38. </html>

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

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

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

  1. //省略。。
  2.   new Promise((aaa, bbb) => {
  3. //省略。。
  4.  if (success) {
  5.      aaa(data)
  6.  } else {
  7.      bbb(data)
  8.  }
  9. //省略。。

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

使用场景

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

ajax请求

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

图片加载

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

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

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

定时器

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

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

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

UI交互

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>promise</title>
  9.   <link rel="stylesheet" href="https://qdtalk.com/weixin/style1229.css">
  10. </head>
  12. <body>
  13.   <button id="myBtn">出现弹窗</button>
  15.   <div class="modal-wap">
  16.     <header>标题</header>
  17.     <article>
  18.       这是内容
  19.     </article>
  20.     <footer>
  21.       <button id="confirm">确定</button>
  22.       <button id="cancel">取消</button>
  23.     </footer>
  24.   </div>
  25.   <script>
  26.     function dom$(id) {
  27.       return document.getElementById(id);
  28.     }
  30.     function modelFun() {
  31.       return new Promise((resolve, reject) => {
  32.         dom$('confirm').onclick = () => {
  33.           resolve()
  34.         }
  35.         dom$('cancel').onclick = () => {
  36.           reject()
  37.         }
  38.       })
  39.     }
  40.     dom$('myBtn').onclick = () => {
  41.       document.querySelector('.modal-wap').style.display = 'block'
  42.       modelFun().then(() => {
  43.           console.log('你点击了确定');
  44.         }, () => {
  45.           console.log('你点击了取消');
  46.         })
  47.         .finally(() => {
  48.           document.querySelector('.modal-wap').style.display = 'none'
  49.         })
  50.     }
  51.   </script>
  52. </body>
  54. </html>

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

image.png

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