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

作者: mao玻璃 | 来源:发表于2019-10-26 10:49 被阅读0次

    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

    相关文章

      网友评论

        本文标题:让微信小程序内置函数返回promise的方法

        本文链接:https://www.haomeiwen.com/subject/pmeyvctx.html