Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
Promise对象有以下两个特点:
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
缺点:
Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
一、在utils文件夹下创建一个tools.js,代码如下:
/**
* 工具类
*/
// 服务器地址
const hostApi = ''
/**
* @封装http请求方法
* @params 形参,是一个对象
* {
* url: '', //接口,必传
* method: '', //方法,默认为GET,可选
* data: '' //数据,可选
* }
*/
const http = (params) => {
// 返回Primise对象
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中',
mask: true
})
let method = params.method || 'GET'
const SUCCESS_STATUS = 200
wx.request({
url: hostApi + params.url,
method: method,
data: params.data || {},
header: {
'content-type': Object.is(method, 'GET') ? 'application/json' : 'application/x-www-form-urlencoded'
},
success: res => {
if (Object.is(res.statusCode, SUCCESS_STATUS)) {
wx.hideLoading()
resolve(res.data)
}
},
fail: err => {
wx.hideLoading()
showError()
reject(err)
}
})
})
}
/**
* 弹窗提示网络错误
*/
function showError() {
wx.showToast({
title: '加载失败',
icon: 'none',
duration: 2000,
mask: true
})
}
module.exports = {
http
}
2、在小程序app.js里配置全局函数
//app.js
const req = require('/utils/tools.js') //引入创建的tools.js文件
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
},
api: { //封装接口
},
http: { //配置全局变量
req: req.http
}
})
3、在项目代码中调用方法
app.http.req(params).then(res => {
//返回结果的处理逻辑
console.log(res)
...
})