风袖第一阶段小程序wx.request封装

一、第一版

import { config } from "../../config/config"

Page({

  data: {
    topTheme:null
  },

  onLoad: function (options) {
    wx.request({
      url:`${config.apiBaseUrl}theme/by/names`,
      method: 'GET',
      data: {
        names: 't-1'
      },
      header: { 
        appkey:config.appKey
      }, 
      success: res=>{ 
        this.setData({
          topTheme:res.data[0]
        })
      }
    })
  },
})

2.第二版

将wx.request抽离出来，封装到一个model对象中

import {config} from "../config/config"
class Theme{
    static getHomeLocationA(callback){
      wx.request({
        url:`${config.apiBaseUrl}theme/by/names`,
        method: 'GET',
        data: {
          names: 't-1'
        },
        header: { 
          appkey:config.appKey
        }, 
        success: res=>{ 
          callback(res.data)
          // this.setData({
          //   topTheme:res.data[0]
          // })
        }
      })
       
    }
}
export {
  Theme
}

    由于this.setData只能在页面page里，model模型里不能使用。getHomeLocationA方法接收一个回调函数，在success里用callback函数将结果返回到home.js中。

/*home.js*/
import { config } from "../../config/config"
import { Theme } from "../../model/theme"

Page({

  data: {
    topTheme:null
  },

  onLoad: function (options) {
    Theme.getHomeLocationA(data=>{
      this.setData({
        topTheme:data[0]
      })
    })
  },
})

3.第三版

这里的wx.request封装的太简单，没有很好的复用性，假想一下，如果Theme里再有其他的方法（getHomeLocationB）也需要调用wx.request,那么是不是wx.request又要重写一遍。这次将wx.request封装到utils目录下的http.js中（专门用来处理Http请的）。

/*http.js*/
import {config} from "../config/config"

class Http{
    static request({url,data,callback,method='GET'}){
        wx.request({
          url: `${config.apiBaseUrl}${url}`,
          data, 
          header: { 
            appkey:config.appKey
          }, 
          success(res) {
              callback(res.data)
          }
        })
    }
    
}
export {
    Http
}

/*theme.js*/
import { Http } from "../utils/http"
class Theme{
    static getHomeLocationA(callback){
      Http.request({
        url:`theme/by/names`,
        data:{
          names: 't-1'
        },
        callback: data=>{
          callback(data)
        }
      })
    }
}
export {
  Theme
}

/*home.js*/
import { config } from "../../config/config"
import { Theme } from "../../model/theme"

Page({

  data: {
    topTheme:null
  },

  onLoad: function (options) {
    Theme.getHomeLocationA(data=>{
      this.setData({
        topTheme:data[0]
      })
    })
  },
})

 

这边有个小疑问一直困扰我，为什么需要callback回调函数？，平时我们所写的函数，如下:

function a(){
	console.log("11")
}
function b(){
	a()
	console.log("222")
}
b();

b方法里调用a，这里方法是同步的，但在Http里success是异步的，在各个层中只要有一层是异步的调用，就会导致所有层与层之间的调用都是异步的。这里home调用theme，theme调用http，而http里success是异步的，导致各层之间都是异步调用，而异步调用的方式常见有三种（callback、promise、async await）.

关于async await，这里不做过多的描述，推荐一篇文章https://segmentfault.com/a/1190000007535316

使用await的前提必须是这个函数的调用要返回结果，由于微信内置的api（wx.request）没有任何返回，因此不能直接使用await，需要将wx.request进一步封装。

在utils目录下新建util.js文件，代码如下：

/*util.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
  }

通过promisic将微信内置的api封装起来，使其返回一个promise对象，使用方法

http.js中的代码如下：

import {config} from "../config/config"
import { promisic } from "./util"

class Http{
    static async request({url,data,method='GET'}){
      const res= await promisic(wx.request)({
          url: `${config.apiBaseUrl}${url}`,
          data, 
          header: { 
            appkey:config.appKey
          }       
        })  
        return res.data    
    }

    
}
export {
    Http
}

theme.js代码

/*theme.js*/
import { Http } from "../utils/http"
class Theme{
    static async getHomeLocationA(){
    const data = await Http.request({
        url:`theme/by/names`,
        data:{
          names: 't-1'
        }
      })
      return data
    }
}
export {
  Theme
}

home.js代码

import { config } from "../../config/config"
import { Theme } from "../../model/theme"

Page({

  data: {
    topTheme:null
  },

  onLoad:async function (options) {
    const data = await Theme.getHomeLocationA();
      this.setData({
        topTheme:data[0]
      })
   
  },
})