小程序使用promise

小程序使用promise


现在小程序已经支持promise了,但它的API使用的是callback,如何用promise封装呢?这是本人在项目中的封装方式,给大家提供一点参考。

先在utils下创建一个request.js文件,代码如下:

// /utils/request.js
const 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 => { // 这里进行数据操作 })
    })
  }
}
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页