让微信小程序内置函数返回promise的方法

Promise API

const promisic = function (func) {
  return function (params = {}) {
    return new Promise((resolve, reject) => {
      const args = Object.assign(params, {
        success: (res) => {
          resolve(res);
        },
        fail: (error) => {
          reject(error);
        }
      });
      func(args);
    });
  };
};

进行封装并使用Promise API

• 封装Promise API
  1.在任意文件下新建xxx.js

  
  
  封装Promise API.png
  
  

  2.复制Promise API的代码片段复制到上述的xxx.js文件

const promisic = function (func) {
    return function (params = {}) {
        return new Promise((resolve, reject) => {
            const args = Object.assign(params, {
                success: (res) => {
                    resolve(res);
                },
                fail: (error) => {
                    reject(error);
                }
            });
            func(args);
        });
    };
};

export { // 一定要导出啊!~童鞋们,不然找不到的
    promisic
}

不要忘记使用 export {} 语句导出
记上次搞很久很久很久很久使用时一直报错,找不到函数

• 使用Promise API

这里以请求服务器数据为例,使用Promise API

1.封装微信小程序内置函数(wx.request)

class Http{
    /**
     * Http请求
     * @param url
     * @param data
     * @param callback
     * @param method
     * 在参数列表两端 添加 '{' 和 '}' 就可以json对象式的传参
     */
    static async request({
                       url,
                       data,
                       callback,
                       method='GET'
    }){
        const res = await promisic(wx.request)({
            url:config.apiBaseUrl + '/' + config.apiVersion + '/' + url,
            data,
            method,
            header:{
                appkey: config.appkey
            }
            // 当返回为promise之后，就不再需要回调函数了
            // success(res) {
            //     callback(res.data)
            // }
        })
        return res.data
    }
}

export {
    Http
}

可以观察到使用时的语法
promise(method)({param})
非常要注意的是,method不要写成method()
就是只要方法(函数)名即可
X promise(wx.request())({param})
√ promise(wx.request)({param})

额外内容

config.js

请求数据中一些反复的变量可以提取成一个配置文件,避免硬编码(重点是好维护啊,童鞋们~),一旦服务端的HOST地址或者API版本(API Version),只要修改配置文件的信息即可!多好~~

// 定义变量
const config = {
    appkey:'F6c**********thb', // 对接秘钥
    apiBaseUrl:'http://api.xxx.com', // HOST地址
    apiVersion:'v1' // api版本
}

// 导出变量
export {
    config
}

最后!还是记得导出export
最后!还是记得导出export
最后!还是记得导出export
export export export export export export export