Один из основных моментов апплета: как сделать интерфейс асинхронного обратного вызова апплета Promise

Апплет WeChat

предисловие

Стандарт ES6PromiseРешите более распространенную проблему ада обратных вызовов в коде Javascript с помощьюasync/awaitАсинхронная логика может быть написана синхронно, что значительно повышает эффективность разработки.

Но пока еще много не реализованных библиотекPromiseИнтерфейс, включающий API апплета WeChat.

Чтобы не идти на компромисс со злыми силами и писать код с единым стилем, нам необходимо пониматьЧто такое обещание.

В этой статье предполагается, что читатель имеет некоторые базовые знания JavaScript и пониманиеPromiseбазовое использование.

интерфейс обратного вызова

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

  • метод апплета

    Передайте успешные и неудачные обратные вызовы отдельно для обработки двух разных случаев.

    wx.showToast({
  title: 'Hello, world',
  success: () => console.log('success'),
  fail: () => console.log('failure'),
})

  • Путь MongoDB

    Передайте обратный вызов с ошибкой в ​​качестве первого параметра, чтобы определить, был ли вызов успешным или нет.

    db.find({ name: 'Idan Loo' }, (err, data) => {
  if (err) {
    // err 是调用失败的原因
    console.log(err)
    return
  }
  // data 就是异步传递回来的参数
  console.log(data)
})

У этих двух методов есть свои преимущества и недостатки.Здесь обсуждаются только метод WeChat и интерфейс метода MongoDB.PromiseЯ считаю, что вы можете делать выводы друг о друге.

Обещать

Простая реализация

кshowToastНапример

const showToast = option =>
  new Promise((resolve, reject) => 
    wx.showToast({...option,
      success: resolve,
      fail: reject,
    })
  )

showToast({ title: 'Hello, Promise' })
  .then(() => console.log('success'))
  .catch(() => console.log('failure'))

ты уже знаешь какPromiseЧтобы упростить интерфейс апплета, теперь вам нужно только повторить приведенный выше код и изменить все интерфейсы, которые вам нужно использовать, чтобыPromiseвозможно.

расширенная реализация

Хотя копирование и вставка челнока выполняется быстро, как программист, вы, естественно, должны стремиться к более лаконичной реализации.

По наблюдениям, все асинхронные интерфейсы апплета имеют одинаковую форму и расположены вwxобъект, поэтому мы можем абстрагироваться от общегоpromisifyспособPromiseИнтерфейс апплета

const promisify = name => option => 
  new Promise((resolve, reject) =>
    wx[name]({...option,
      success: resolve,
      fail: reject,
    })
  )

const showToast = promisify('showToast')
const request = promisify('request')

Теперь с помощью всего одной строки кода вы можетеPromiseИзмените интерфейс апплета и быстро измените уродливый код обратного вызова, написанный ранее!

более продвинутая реализация

Если вы похожи на меня, чистота кода настолько неприемлема для приведенного выше кода, то поздравляю, черезProxyМы можем лучше достигать наших целей.

const pro = new Proxy(wx, {
  get(target, prop) {
    return promisify(prop)
  }
})

pro.showToast({ title: 'Hello, world' }).then(...)
pro.request({ url: 'https://github.com' }).then(...)

существуетpromisifyметод, основанный наwxК объекту добавлен прокси, и теперь вы можете использовать его какwxиспользовать как объектpro, и все асинхронные методы становятсяPromiseФорма!

Нет необходимости реализовать

Лучшая реализация — отдать другим, как я уже упаковал и загрузил код в предыдущей статье,minapp-promise, менее 1к, из коробки.

Это нелегко увидеть здесь, я надеюсь, что вы можете поставить мне лайк и, кстати, поставить мне звезду на GitHub.

Если в коде мобильного телефона есть ошибки или упущения, исправьте их.

Категории