把微信小程序异步API封装为Promise。用Promise处理异步操作会非常方便。
方法一
参考文章:把微信小程序异步api转化为Promise,方便异步编程
核心代码:
// index.js
const toPromise = (wx) => {
return (method) => {
return (option) => {
return new Promise ((resolve, reject) => {
wx[method]({
...option,
success: (res) => { resolve(res) },
fail: (err) => { reject(err) }
})
})
}
}
}
export default toPromise
使用方法
1.在需要用到的地方引入
import toPromise from '/module/to-promise/src/index'
2.绑定微信全局对象(wx)
到函数,以便可以取到微信得API
const toPromiseWx = toPromise(wx)
3.开始转化你需要得异步API
//apiName为微信异步方法名,如对wx.request()进行转化
const request = toPromiseWx('request')
//直接使用request方法
举例
import toPromise from '/module/to-promise/src/index'
//转换wx.getStorage()
const getStorage = toPromsie(wx)('getStorage')
//使用
getStorage({ key: 'test' })
.then(
(res) => {
//res的值与wx.getStorage({ success: (res) => {} })中的res值一样
//res = {data: 'keyValue'}
console.log(res.data)//控制台打印storage中key对于的value
return res.data//如果需要继续链式调用转化后的api,需要把值显示返回
},
(err) => {
//err的值与wx.getStorage({ success: (err) => {} })中的err值一样
throw err
}
)
方法二
参考文章:微信小程序:使用Promise简化回调
因为微信小程序异步api都是success和fail的形式,所有有人封装了这样一个方法(核心方法):
//promisify.js
const promisify = (api) => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
}
export default promisify
简单示例:
// 获取系统信息
wx.getSystemInfo({
success: res => {
// success
console.log(res)
},
fail: res => {
}
})
使用上面的promisify.js
简化后:
import promisify from './promisify'
const getSystemInfo = promisify(wx.getSystemInfo)
getSystemInfo().then(res=>{
// success
console.log(res)
}).catch(res=>{
})
复杂的例子:
// 模拟获取code,然后将code传给后台,成功后获取userinfo,再将userinfo传给后台
// 登录
wx.login({
success: res => {
let code = res.code
// 请求
imitationPost({
url: '/test/loginWithCode',
data: {
code
},
success: data => {
// 获取userInfo
wx.getUserInfo({
success: res => {
let userInfo = res.userInfo
// 请求
imitationPost({
url: '/test/saveUserInfo',
data: {
userInfo
},
success: data => {
console.log(data)
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
使用 promisify.js
简化后:
import promisify from './promisify'
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)
// 登录
login().then(res => {
let code = res.code
// 请求
pImitationPost({
url: '/test/loginWithCode',
data: {
code
},
}).then(data => {
// 获取userInfo
getUserInfo().then(res => {
let userInfo = res.userInfo
// 请求
pImitationPost({
url: '/test/saveUserInfo',
data: {
userInfo
},
}).then(data => {
console.log(data)
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
可以看到简化效果非常明显,赶紧把小程序的异步调用API统统封装一遍,就可以愉快的开发小程序了。