Инструменты, используемые при разработке WeChat: улучшение сетевых запросов и Promisify для почти всех асинхронных операций

Использование: скопируйте нужные файлы инструментов в свой проект и импортируйте их.

• Сетевые запросы в мини-программах

   wx.request был упакован в стиле Promise. При использовании доступны методы get и post. Поддерживается добавление перехватчиков, можно отдельно настроить header, token, baseUrl и т. д. Ниже приведён пример использования метода post.

  • Импорт файла js:

    import req from '../../utils/Request.js'

  • Конфигурация Request, обычно выполняется в App.js>onLaunch:

      configReq(){
        //Конфигурирование baseUrl и перехватчика, например, baseUrl может быть /api
        req.baseUrl(config.serverUrl)
          .interceptor(res=>{
            switch(res.data.code){
              case 401: 
                wx.showToast({
                  icon: 'loading',
                  title: 'Перезапустите вход',
                })
                this.login()
                return false;
              case 0:
                return true;
              default:
                wx.showToast({
                  title: 'Операция не удалась',
                })
                return false;
            }
          })
      },

  • После успешного входа установите токен:

    req.token(token)

  • Выполните сетевой запрос:

    req.post('/goods',data,header)
    	.then(res=>res.data.data)
    	.then(data=>{
        	wx.showToast({
                title:'Создание успешно'
            })
    	})

• Использование Promise для асинхронных операций

  Многие операции в wx api являются асинхронными, и их формы параметров в основном одинаковы. Здесь Promise был упакован, имена методов, параметры и официальные API совпадают, только в параметрах не нужно передавать success и fail обратные вызовы. В качестве примера рассмотрим showToast:   Обычная практика:

wx.showToast({
  title: 'Успех',
  icon: 'success',
  duration: 2000,
  success: ()=>{
    console.log('Вызов успешно')
  },
  fail: err=>{
    console.error('Вызов не удался',err)
  }
})

  Использование Promise:

import Wx from 'Wx.js'

Wx.showToast({
  title: 'Успех',
  icon: 'success',
  duration: 2000,
}).then(()=>{
  console.log('Вызов успешно')
}).catch(err=>{
  console.error('Вызов не удался',err)
})

  Другие API используются одинаково, методы, параметры, возвращаемые значения см. в официальной документации. Если есть ошибки или упущения, пожалуйста, создайте issue.

• Очередь задач с таймером

   В некоторых сценариях нам нужно определить последовательность отложенных задач, таких как анимация интерфейса, когда некоторые элементы появляются один за другим с определённым интервалом. В этом случае, если мы напрямую используем setTimeout, мы столкнёмся с проблемой ада обратного вызова, код будет трудно читать, и его будет сложно поддерживать. Здесь мы упаковали инструмент, который может решить эту проблему. Для получения подробной информации см. статью js定时任务队列, использование следующее:

  import Schedule from 'Shedule.js'
  
  new Schedule().task(task1)
    .delay(1000).task(()=>this.setData({title:'Shedule'}))
    .delay(500).task(task3)