小程序Promise封装wx.request

Promise解决异步+回调地狱

重新再一次封装wx.request,这里封装没用reject,而是用了resolve(),个人觉得比较方便好用。

utils/request.js

const API_URL = 'https://www.xxx.cn'; //服务器api地址

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        //成功   res.data.isSuccess  接口返回成功提示(根据自己项目来)
        if (res.statusCode == 200 && res.data.isSuccess){
          resolve(res.data)
        }else{
          resolve()
        }
      }
      obj.fail = function (res) {
        //失败
        resolve()
      }
      fn(obj)
    })
  }
}

//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

function fetchApi(url, type, params) {
  let getRequest = wxPromisify(wx.request);
  let apiUrl = API_URL+url;
  return getRequest({
    url: apiUrl,
    method: type,
    data: params,
    header: {
      'content-type': 'application/json;charset=utf-8',
    }
  })
}
module.exports = {fetchApi};

引用 index.js

//引用request.js
import request from '../../utils/request.js';

onLoad(){
	const that = this;
	let params = { code: res.code}
	request.fetchApi('MiniProgram/GetJsCode2Session(接口地址)', 'POST', params).then(res => {
	  if (res) { //res!=undefined 证明返回成功,执行花括号里面操作,否则有问题走else的错误提示操作
	    app.globalData.openid = openid;
	  } else {
	    that.setData({ serverfail: true,showLoad: false });
	    return;
	  }
	})
	  .then(res=>{ //这里当上一个异步请求结束,走这里的操作
	    that.login(openid);
	  })
	  .then(res=>{ //这里当上一个异步请求结束,走这里的操作
	    that.login(openid);
	  })
	  .then(res=>{ //这里当上一个异步请求结束,走这里的操作
	    that.login(openid);
	  })
	  ......
	  .then(res=>{ //这里当上一个异步请求结束,走这里的操作
	    that.login(openid);
	  })
	  .finally(()=>{ //这里无论请求结果怎么样都执行这里,可以做比如请求后loading过渡页动画结束之类的操作
	    that.setData({showLoad:false})
  })
}

你可能感兴趣的:(微信小程序)