小程序开发中如何使用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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
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实现清除MySQL死连接的方法
2016/07/23 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
web性能优化之javascript性能调优
2012/12/28 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
python字典get()方法用法分析
2015/04/17 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Java及python正则表达式详解
2017/12/27 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python脚本后台执行方式
2019/12/21 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python修改列表值问题解决方案
2020/03/06 Python
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
护理自荐信范文
2013/10/05 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
质检部部长职责
2013/12/16 职场文书
销售口号大全
2014/06/11 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Python使用DFA算法过滤内容敏感词
2022/04/22 Python