小程序开发中如何使用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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
js 窗口抖动示例
Sep 04 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
分享15个Webpack实用的插件!!!
Mar 31 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中Closure类的使用方法及详解
2015/10/09 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
详解jQuery选择器
2016/12/21 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python比较两个列表大小的方法
2015/07/11 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
高一英语教学反思
2014/01/22 职场文书
委托证明范本
2014/11/25 职场文书
安全生产先进个人总结
2015/02/15 职场文书
企业法律事务工作总结
2015/08/11 职场文书
Docker下安装Oracle19c
2022/04/13 Servers