Promise 与 Confirm 提示框

时间 2019-11-29

标签 promise confirm 提示繁體版

原文原文链接

Promise 是 ES6 中很是重要的概念。相较于回调函数和事件监听，Promise 能够更好的解决了异步编程中遇到的问题。vue

Promise 是 ES6 新引入的对象。使用 Promise 封装一个异步过程，避免了使用回调函数，链式调用让代码更加清晰。git

1. Promsie 的基本概念

Promise 对象是个构造函数，经过 new 建立一个 Promise 实例。github

const promise = new Promise((resolve, reject) => {})复制代码

一个 Promise 对象有 3 种状态:ajax

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操做成功完成。
rejected: 意味着操做失败。

执行 Promise 回调中的 resolve 与 reject 函数改变 Promise 对象的状态。编程

2. Promsie 的应用

使用 Promise 实现一个简单的 ajax 函数是个很是好的例子。promise

// 封装 XMLHttpRequest
funtion ajax () {
    return new Promise((resolve, reject) => {
        var req = new XMLHttpRequest()
        req.onreadystatechange = function () {
            if (this.readyState === XMLHttpRequest.DONE) {
                if (this.status === 200) {
                    resolve(this.responseText)
                } else {
                    reject(new Error('ajax error'))
                }
            }
        }
        req.open('GET', '/url')
        req.send()
    })
}
// 调用
ajax().then(res => {
    // ajax 成功以后的 responseText
}).catch(err => {})复制代码

resolve 与 reject 函数调用时的能够传递参数，在 Promise 实例以后的 then 与 catch 回调中能够获取到这些参数。这样的话，即可以对异步过程传递出的信息作出相对应的处理。app

3. Confirm 提示框与 Promsie

上图是一个十分简单的 Confirm 提示框。其实，咱们能够发现 Confirm 提示框也具备 3 种状态，跟 Promise 三种状态很是相像。提示框在建立时对应 pending ，点击取消以后对应 rejected ，点击肯定以后对应 fulfilled。因此咱们能够编写一个名为 confirm 的函数，这个函数实现两个功能：

在建立 Confirm 组件以后，返回一个 Promise。
当用户点击肯定或者取消按钮时改变这个 Promise 实例的状态。

那么就能够在调用 confirm 函数以后的 then 与 catch 中针对不一样的操做作出相应的处理。
下面的伪码描述了这个过程。异步

confirm().then(() => {
    // 点击了 肯定
}).catch(() => {
    // 点击了 取消
})复制代码

按照这个思路，咱们来一步步实现这个 confirm 函数。异步编程

3.1 Confirm 组件

Confirm 组件相似于一个弹出层，其中的内容区域须要居中显示。使用 fixed 绝对定位与 flex 布局能够实现。完整的代码点击这里。函数

3.2 confirm 函数

实现的 confirm 的一些要点:

调用 confirm 函数，建立 Confrim 组件并同时返回一个 Promise 对象。
在按钮点击以后，改变 Promise 对象的状态，触发以后 then 或者 catch 执行，同时关闭弹出层，销毁组件。

import Vue from 'vue'
let currentMsg = null
let instance = null

const ConfirmConstructor = Vue.extend(require('./Index.vue'))
function confirm (option = {}) {
    instance = new ConfirmConstructor({
        el: document.createElement('div')
    })
    // ...
    // 弹出层再次隐藏时时销毁组件
    instance.$watch('display', function (val) {
    if (!val) {
        instance.$destroy(true)
        instance.$el.parentNode.removeChild(instance.$el)
    }
    instance.callBack = defaultCallBack
    document.body.appendChild(instance.$el)
    // 显示
    instance.display = true
    return new Promise((resolve, reject) => {
        currentMsg = { resolve, reject }
    })
  })
}

function defaultCallBack (action) {
    // ...
    if (action === 'confirm') {
        currentMsg.resolve('confirm')
    } else {
        currentMsg.reject('cancel')
    }
}

export default confirm复制代码

在须要的时候，导入 confirm 函数，经过链式调用便可。
完成的代码片断点击这里。

4. 总结

本文简单介绍了一下 Promise 的概念，而且应用 Promise 实现了一个简单的 confirm 函数。从以上例子能够看出，对于一些异步操做， Promise 是一个很是好的工具。但愿你们能掌握它的用法。