小程序开发中如何使用async-await并封装公共异步请求的方法


Posted in Javascript onJanuary 20, 2019

前言

在平常的项目开发中肯定会遇到同步异步执行的问题,还有的就是当执行某一个操作依赖上一个执行所返回的结果,那么这个时候你会如何解决这个问题呢;

1.是用settimeout让它异步执行,显然这只是让它加入异步任务队列中去执行,但并不能保证等待其返回结果再去执行另一个操作。

2.还是自己封装callback函数?那样就会陷入所谓的回调地狱,代码层层嵌套,环环相扣,逻辑稍微复杂就会很难去维护。

3.当然es6中的promise倒是很好的解决了这样的问题,再配合es7的async和await就更完美了,await返回的也是一个promise对象,这个关于promise和async,await的使用方法就不说了。

实现方案

首先小程序目前还是不支持es7的async和await的,那么如何让它支持呢

1、点击下载

regenerator,并把下载好的runtime.js文件夹放到自己小程序的utils目录下,包总共才20kb多,体积很小的。

小程序开发中如何使用async-await并封装公共异步请求的方法

2、在需要调的地方引入 import regeneratorRuntime from '../../utils/runtime.js'

3、如何封装并使用

封装:

const postData = async function(url, data) {
 wx.showLoading({
 title: '加载中',
 })
 let promiseP = await new Promise(function(resolve, reject) {
 wx.request({
  url: baseUrl + url,
  data: data,
  method: 'POST',
  header: {
  'content-type': 'application/json',
  'access-token': wx.getStorageSync('token')
  },
  success: function(res) {
  wx.hideLoading();
  if (res.statusCode === 200) {
   resolve(res)
  } else {
   reject(res.data)
  }
  },
  fail: function(err) {
  wx.hideLoading();
  reject(err)
  if (err.code === 401) {}
  }
 })
 })
 return promiseP
}
module.exports = {
 postData
}

使用:

import regeneratorRuntime from '../../utils/runtime.js';
const app = getApp(), 
  postData = require('../../service/koalaApi.js');


async demo() {
 await postData(app.globalData.baseUrl + '/test',{
 data: {}
 }).then((res) => {
 console.log(res)
 })
}

下面进行了更完善的一个封装,包括各种错误判断的处理和简化,通过传参的方式,来灵活调用

// 当前host
const url_host = require('API.js').host 
// 当前版本
const currentVersion = require('util.js').currentVersion 
// 当前路径
import { currentPagePath } from 'util.js' 

// 调用fetch方法,然后依次链式传入
// url, method, header, data, loading(是否显示loading) 

function fetch(url, method, header, data, loading) {
 // 判断给服务端传递undefined的问题
 let fetchP = new Promise(function (resolve, reject) {
 if (loading) {
  wx.showLoading({
  icon: 'loading'
  })
 }
 if(data && data.unionId && typeof data.unionId === "undefined"){
  wx.hideLoading()
  return reject({
  ok:false,
  error: 'unionId -> ' + typeof data.unionId
  });
 }
 wx.request({
  url: url_host + url,
  method: method ? method : 'GET',
  header: {
  'content-type': 'application/json', // 默认值 
  'version': currentVersion,
  'pagePath': currentPagePath()
  },
  data: data,
  success: function (res) {
  if (res.statusCode < 500) {
   resolve(res.data)
  } else {
   showError()
   reject(res.data)
  }
  },
  fail: function (err) {
  showError()
  reject(err)
  },
  complete: function (comp) {
  if (loading) {
   wx.hideLoading()
  }
  }
 })
 })
 return fetchP
}

// 服务器开小差了
function showError () {
 wx.hideLoading()
 // 获取头文件路径
 wx.navigateTo({
 url: '/pages/serverError/serverError',
 })
}

module.exports = {
 fetch
}

思考

1、为什么引入regeneratorRuntime,就能够使用async/await?不需要配合babel吗?

2、regeneratorRuntime都做了什么?

总结

1、首先先明白babel和polyfill分别干啥的;

Babel 是一个广泛使用的转码器,Babel 默认只转换新的 JavaScript 句法,而不转换新的 API。

例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转译。

如果想使用这些新的对象和方法,必须使用 babel-polyfill,为当前环境提供一个垫片。

2、Polyfill用于实现浏览器并不支持的原生API的代码。

3、在明白上面的意思之后,还需要明白的是,babel-polyfill是一股脑把全部都给你添加到js文件中,而现在的runtime将会判断你哪些需要加载的,有选择性的进行加载,并且后者也不会污染全局变量。在这里regeneratorRuntime最终转化成es6的generator来用的。具体的可以自己去下babel官网,输入相关代码可以看下最终转换后的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 #Javascript
js序列化和反序列化的使用讲解
Jan 19 #Javascript
You might like
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
Mac 上切换Python多版本
2017/06/17 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
python 等差数列末项计算方式
2020/05/03 Python
python实现双人五子棋(终端版)
2020/12/30 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
测试工程师程序员求职信范文
2014/02/20 职场文书
二手房买卖协议书
2014/04/10 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014年调度员工作总结
2014/11/19 职场文书
被委托人身份证明
2015/08/07 职场文书
调研报告的主要写法
2019/04/18 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
MySQL 数据类型详情
2021/11/11 MySQL