用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-2-26 00:46

许久不曾写博客文章,今日回归,再次拾起,不以用来予人参考,只为记录那些曾经在项目里面碰到过的实际问题以及解决办法,记录下来,以后可以用作参考。回归正题在小程序开发中,我们请求后台数据接口的时候,屡次要 ...

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

回归正题

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

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

文件夹内容

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

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

  1. //通用方法
  2. const wxRequest = (url, method, params) => {
  3. return new Promise((resolve, reject) => {
  4. wx.request({
  5. url: `${baseUrl}${url}`,
  6. data: params,
  7. method: method,
  8. header: {
  9. 'wili-access-token': wx.getStorageSync('token'),
  10. },
  11. success: res => {
  12. if (res.statusCode === 200) {
  13. resolve(res);
  14. } else {
  15. reject(res);
  16. }
  17. },
  18. error: error => {
  19. reject(error);
  20. }
  21. });
  22. }).catch(msg => {
  23. console.error(msg);
  24. });
  25. };
  26. module.exports.wxRequest = wxRequest;

代码的意思是 把 url, method, params 这些会发生变化的作为参数传入。如果请求成功则会调用resolve(res); 并把返回信息res传入,如果失败则会调用 reject(error)方法;并把错误信息传入。 
最后把wxRequest变量导出,因为小程序遵循的模块化方案使用的是commonJS的方案。

3、调用请求方法 
举个栗子,我们在api_user.js 这个文件内调用刚刚封装好的wxRequest ,如图。

  1. const api = require('./index.js');
  2. // 用户相关api
  3. module.exports.login = params => {
  4. return api.wxRequest('/api/getMiniUserInfo', 'POST', params)
  5. }
  6. // module.exports.saveUserInfo = params => {
  7. // return api.wxRequest('/api/miniRegist', 'POST', params)
  8. // }
  9. module.exports.getUserInfo = params => {
  10. return api.wxRequest('/api/personal', 'GET', params)
  11. }

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

4、使用封装好的处理数据的api

  1. const { login, getUserInfo } = require("./api/api_user.js");
  2. App({
  3. onLaunch: function() {
  4. // 登录
  5. wx.login({
  6. success: res => {
  7. this.userLogin(res.code);
  8. }
  9. });
  10. },
  11. // 小程序启动请求登录接口
  12. userLogin(code) {
  13. login({ code }).then(res => {//调用的login就是我们上面封装好的哈
  14. wx.setStorageSync("token", res.data.data);
  15. });
  16. },
  17. globalData: {
  18. userInfo: null
  19. }
  20. });

引入api_user.js ,在userLogin函数里面执行的login函数,就是我们刚刚经过封装用作处理接口数据的函数了。传入它的参数。在then()里面拿到返回的数据res与执行回调函数处理之后逻辑。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 寒山地瓜侠 来自: 简书