1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法

 // util.js
const promisic = function (func) {
return function (params = {}) {
return new Promise((resolve, reject) => {
const args = Object.assign(params, {
success: (res) => {
resolve(res)
},
fail: (error) => {
reject(error)
}
})
func(args)
})
}
} export {
promisic
}

2. 编写Http类封装HTTP请求

 // http.js
import { promisic } from "./util"
import { config } from "../config/config" /**
* 使用 async await 封装HTTP请求
*/
class Http { static async request({ url, method='GET', data }) {
// 将wx.request方法转换成promise方法
const res = await promisic(wx.request)({
url: `${config.apiBaseUrl}${url}`,
method,
data,
header: {
appkey: config.appkey
}
})
return res.data
} } export {
Http
}

3. 编写Theme业务类调用封装好的Http请求

// theme.js
import { Http } from "../utils/http" /**
* 编写主题请求业务类
*/
class Theme { /**
* 获取首页主题A
*/
static async getHomeLocationA() {
return await Http.request({
url: 'xx/xx/xxx',
data: {
names: 't-1'
}
})
} } export {
Theme
}

4. 在page中调用Theme业务类获取首页主题A方法

 // home.js
import { Theme } from '../../model/theme' Page({ data: {
topTheme: {}
}, async onLoad (options) {
// 获取首页主题A
const data = await Theme.getHomeLocationA()
this.setData({
topTheme: data[0]
})
} })

附上目录结构

这样就可以愉快地使用async await形式的Http请求了,彻底摆脱各种callback方法!

使用 async await 封装微信小程序HTTP请求的更多相关文章

  1. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  2. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  3. 简单封装微信小程序

    一.不同环境配置封装 新建config文件夹,根据自己有不同环境设置不同的js文件 具体js文件内容: exports.config = { requestHost: 'https://******. ...

  4. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  5. 微信小程序 网络请求之re.request 和那些坑

    微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  6. 微信小程序 -- 数据请求

    微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> ...

  7. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  8. 让微信小程序每次请求的时候不改变session_id的方法

    让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...

  9. 微信小程序request请求的封装

    目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...

随机推荐

  1. 2019-8-31-gif-格式

    title author date CreateTime categories gif 格式 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 17:23:3 + ...

  2. 笔记65 Spring Boot快速入门(五)

    SpringBoot+JPA 一.什么是JPA? JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期 ...

  3. 【CodeVS】 纯OI题

    [1203] 判断浮点数是否相等 [青铜 Bronze] 我们一般认为两个浮点数相等,当且当他们之间的误差不超过1e-8. /* 作者:Wanying 题目:p1203 判断浮点数是否相等 */ /* ...

  4. MySQL中可能遇到的问题及解决方法

    一.在创建存储函数时,出现错误: ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQLDA ...

  5. 中位数+暴力——cf433C

    /* 中位数到所有数的距离之和最小 因为只能改一个数,所以我们找一个数,将其改为和其相邻的数的中位数,使答案最小 先求一次原答案 把每个数相邻的数用vector存下来,然后排序找中位数,计算减小的量 ...

  6. JZOI1169A 平均数Ave

    #include <cstdio> #include <cmath> #define lztin() read() #define ztyout( a ) printf( &q ...

  7. SDNU 1217 CD收藏——并查集

    Description     lmh平常爱听歌,所以买了很多的CD来收藏,但是因为平常整理不当,所以忘记了这些CD的歌手是谁.现在他想知道他到底收藏了多少位歌手的专辑,于是他想了一个办法,同时拿出两 ...

  8. JS闭包的详解

    目录 一.什么是闭包? 二.闭包有什么好处?应用在哪? 2.1 好处: 2.2 用法: 三.闭包需要注意的地方? 3.1 IE下会引发内存泄露 一.什么是闭包? 特点: 1 函数嵌套函数 2 内部函数 ...

  9. Linux shell模拟多线程拷贝

    #!/bin/sh #日志文件 log_file=/data/threadcp.log a=$(date +%H%M%S) echo -e "startTime:\t$a" #最大 ...

  10. Openstack 中的消息总线 & AMQP

    目录 目录 消息总线 消息总线的原理 AMQP 消息总线 Openstack 采用了面向服务的开发模式(有别于面向对象和面向过程),需要我们去考虑各个服务之间和各项目之间是如何传递消息的. Restf ...