小程序使用promise
现在小程序已经支持promise了,但它的API使用的是callback,如何用promise封装呢?这是本人在项目中的封装方式,给大家提供一点参考。
先在utils下创建一个request.js文件,代码如下:
// /utils/request.jsconst app = getApp();const baseUrl = app.globalData.url;const headerConfig = { "Content-Type": "application/json",}// 这是一个通用的方式,所有的异步都能用这个,但是不方便,每次使用时obj的参数很重复export function wxPromise(fn) { return function(obj = {}) { return new Promise((resolve, reject) => { obj.success = res => { resolve(res) }; obj.fail = res => { reject(res) }; fn(obj) }) }}// 这是对post请求的封装export function post(url, data={}){ return new Promise((resolve, reject) => { //网络请求 wx.request({ url: baseUrl + url, data, method: 'POST', header:headerConfig, success: function (res) {//服务器返回数据 resolve(res); }, fail: function (error) { reject(error); } }) });}// 这是对get请求的封装export function get(url, data={}){ return new Promise((resolve, reject) => { //网络请求 wx.request({ url: baseUrl + url, data, method: 'GET', header:headerConfig, success: function (res) {//服务器返回数据 resolve(res); }, fail: function (error) { reject(error); } }) });}
项目中主要是使用wx.request的get和post请求,为了方便就单独定义两个方法。
使用方式非常简单:
// 先用import将方法引入import { get, wxPromise} from "../../utils/request";getToken () { if(!token) { // 注意wxPromise(wx.login)返回的是一个方法,调用这个返回的方法才是我们要的promise对象 wxPromise(wx.login)() .then(res => get("/auth/getToken", {jscode: res.code}) .then(res => { // 这里进行数据操作 }) }}
上面这个例子中,如果不使用get方法,其实也是可以的
// 先用import将wxPromise方法引入import { wxPromise} from "../../utils/request";const app = getApp();getToken () { if(!token) { // 注意wxPromise(wx.login)返回的是一个方法,调用这个返回的方法才是我们要的promise对象 wxPromise(wx.login)() .then(res => wxPromise(wx.request)({ url: app.globalData.url + "/auth/getToken", method: 'GET', data: {}, // 这里放请求参数 header: { "Content-Type": "application/json"} }) .then(res => { // 这里进行数据操作 }) }) }}