微信小程序_封装异步请求_基于promise+wx.request

写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目

1 需求

封装所有请求，如果请求状态为：请求中，页面显示“加载中”

2 js代码

在src目录下创建utils/request.js文件

export default (params) => {
    return new Promise((resolve, reject) => {

        // 加载中
        uni.showLoading({
            title: "加载中"
        })

        wx.request({
            ...params,
            success(res) {
                resolve(res.data);
            },
            fail(err) {
                reject(err);
            },
            complete() {
                uni.hideLoading();
            }
        })
    })
}

代码解析：

• success()：请求成功的回调函数
• fail()：请求失败的回调函数
• complete()：请求成功|失败的回调函数
• uni.showLoading()：主要作用是在请求数据的过程中，页面显示加载中

3 使用

在main.js中引入request(自己封装的请求)

import request from "./utils/request";
Vue.prototype.request = request;

使用this.request().then的格式调用

举个栗子：

onLoad() {
    this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical"
    }).then(res => {
        console.log(res);
    })
}

4 promise

Promise 是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件，一更合理且更强大。它最早由社区提出并实现，ES6 将其写进了语言标准，统一了用法 ，并原生提供了Promise 对象 。

所谓 Promise ，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上来，Promise 是一个对象，从它可以获取异步操作的消息 。 Promise提供统一 的 API ，各种异步操作都可以用同样的方法进行处理。

详见ES6标准入门第三版第14章