写在前边:《微信小程序_···》系列的博文,是学习了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章