记一次小程序开发中如何使用async-await并封装公共异步请求

栏目: JavaScript · 发布时间: 5年前

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

前言

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

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

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

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

实现方案

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

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

![图片描述][2]

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官网,输入相关代码可以看下最终转换后的代码。


以上所述就是小编给大家介绍的《记一次小程序开发中如何使用async-await并封装公共异步请求》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Creative Selection

Creative Selection

Ken Kocienda / St. Martin's Press / 2018-9-4 / USD 28.99

Hundreds of millions of people use Apple products every day; several thousand work on Apple's campus in Cupertino, California; but only a handful sit at the drawing board. Creative Selection recounts ......一起来看看 《Creative Selection》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具