Обещание и подтверждение запросов

внешний интерфейс Vue.js Promise

Обещания — очень важная концепция в ES6. По сравнению с функциями обратного вызова и прослушивателями событий Promises могут лучше решать проблемы, возникающие при асинхронном программировании.

Обещания — это новые объекты, представленные в ES6. использоватьPromiseИнкапсулирует асинхронный процесс, избегая использования функций обратного вызова, а объединение вызовов в цепочку делает код более понятным.

1. Основная концепция Promsie

Объект Promise — это конструктор, который создает экземпляр Promise через new.

const promise = new Promise((resolve, reject) => {})

Объект Promise имеет 3 состояния:

  • pending: начальное состояние, а не состояние успеха или отказа.
  • выполнено: означает, что операция завершена успешно.
  • отклонено: означает, что операция не удалась.

Выполните функции разрешения и отклонения в обратном вызове Promise, чтобы изменить состояние объекта Promise.

2. Применение Промси

Отличным примером является реализация простой функции ajax с использованием промисов.

// 封装 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 => {})

Параметры могут быть переданы при вызове функций разрешения и отклонения, и эти параметры могут быть получены в обратных вызовах then и catch после экземпляра Promise. Таким образом, информация, передаваемая асинхронным процессом, может обрабатываться соответствующим образом.

3. Подтвердите окно подсказки и обещание

一个常见的 confirm 提示框
Обычный запрос подтверждения

На картинке выше показано очень простое окно подтверждения. На самом деле, мы можем обнаружить, что окно подтверждения также имеет 3 состояния, которые очень похожи на три состояния Promise. Подсказка соответствует моменту ее созданияpending, нажмите Отмена, чтобы соответствоватьrejected, нажмите OK, чтобы соответствоватьfulfilled.所以我们可以编写一个名 为 confirm 的函数 ，这个函数实现两个功能：

  1. После создания компонента Confirm верните обещание.
  2. Изменяет состояние этого экземпляра Promise, когда пользователь нажимает кнопки OK или Cancel.

Затем вы можете выполнить соответствующую обработку для различных операций в then и поймать после вызова функции подтверждения.
Следующий псевдокод описывает этот процесс.

confirm().then(() => {
    // 点击了 确定
}).catch(() => {
    // 点击了 取消
})

В соответствии с этой идеей, давайте реализуем эту функцию подтверждения шаг за шагом.

3.1 Подтвердить компонент

Компонент Confirm похож на всплывающий слой, где область содержимого должна быть центрирована. Этого можно добиться, используя фиксированное абсолютное позиционирование и гибкий макет. полный код нажмитездесь.

3.2 функция подтверждения

Некоторые ключевые моменты реализованного подтверждают:

  1. Вызовите функцию подтверждения, создайте компонент Confrim и одновременно верните объект Promise.
  2. После нажатия кнопки состояние объекта Promise меняется, а затем после триггера выполняется или 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

При необходимости импортируйте функцию подтверждения и вызовите ее в цепочке.
Нажмите на завершенный фрагмент кодаздесь.

4. Резюме

В этой статье кратко представлена ​​концепция Promise и реализована простая функция подтверждения с использованием Promise. Как видно из приведенных выше примеров, промисы — очень хороший инструмент для некоторых асинхронных операций. Надеюсь, вы сможете освоить его использование.

использованная литература

Категории