小程序开发-数据请求层的封装

许久不曾写博客文章，今日回归，再次拾起，不以用来予人参考，只为记录那些曾经在项目里面碰到过的实际问题以及解决办法，记录下来，以后可以用作参考。

回归正题

在小程序开发中，我们请求后台数据接口的时候，屡次要使用小程序的网络请求api函数 wx.request ，然后就是一大段的代码与回调函数，非常的不方便代码复用和代码的维护检查，因此，我们尝试来封装一个“数据请求层”。

1、新建一个专门用于放置与接口请求有关的js文件，并命名为 “api”
不多bb，把代码贴上如图。

2、在index.js里面封装wxRequest，封装成为Promise的形式，用于在其他js文件调用。

const baseUrl = "www.baidu.com"; //这里以百度为例子，可自行修改接口地址


//通用方法
const wxRequest = (url, method params)=>{
  returnnew Promise((resolve reject{
      url: `${baseUrl}${url}`      method        'wili-access-token' wxgetStorageSync('token'),

      success res {
        }else{
}
}
  }).catchmsg     consolemsg});
};

代码的意思是 把 url,method,params 这些会发生变化的作为参数传入。如果请求成功则会调用resolve(res); 并把返回信息res传入，如果失败则会调用 reject(error)方法;并把错误信息传入。 
最后把wxRequest变量导出，因为小程序遵循的模块化方案使用的是commonjs的方案。
3、调用请求方法 
举个栗子，我们在api_user.js 这个文件内调用刚刚封装好的wxRequest ，如图。

);

login params apiwxRequest'/api/getMiniUserInfo''POST')

//   return api.wxRequest('/api/miniRegist','POST',params)

'GET')
导入我们刚刚封装好的index.js文件模块，由于我们刚刚封装的是Promise形式的wxRequest ，所以函数的返回值返回的就是Promise对象，例如， 
return api.wxRequest('/api/getMiniUserInfo',params) 这里就是传递请求参数，当请求成功后会返回wxRequest 的一个Promise“结果”对象， 这个结果对象由 resolve方法 或者reject方法执行后返回的。(不理解Promise的童鞋，可自行先理解学习一下ES6 Promise)。
4、使用封装好的处理数据的api

App({
login({
thisuserLogincode);
});
  userLogin    login({ code thenres {//调用的login就是我们上面封装好的哈
  globalData    userInfonull
引入api_user.js ，在userLogin函数里面执行的login函数，就是我们刚刚经过封装用作处理接口数据的函数了。传入它的参数。在then()里面拿到返回的数据res与执行回调函数处理之后逻辑。

                
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

小程序开发-数据请求层的封装

相关推荐