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

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

回归正题

在小程序开发中，我们请求后台数据接口的时候，屡次要使用小程序的网络请求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与执行回调函数处理之后逻辑。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!