小程序开发中如何使用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修改css样式style浅谈
May 06 Javascript
使用JS读秒使用示例
Sep 21 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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 上传文件大小限制
2009/07/05 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
Node.js文件操作详解
2014/08/16 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python实现基本进制转换的方法
2015/07/11 Python
python查看微信好友是否删除自己
2016/12/19 Python
python flask实现分页效果
2017/06/27 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Django中create和save方法的不同
2019/08/13 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
从python读取sql的实例方法
2020/07/21 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
专科应届生求职信
2013/11/24 职场文书
银行委托书范本
2014/04/04 职场文书
初中学校军训方案
2014/05/09 职场文书
图书室标语
2014/06/21 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript