在项目根目录下创建utils文件夹，在utils文件夹下，定义url.js、Http.js和Cache.js三个js文件

为什么定义这三个文件：

因为在小程序开发过程中，一般像首页、列表页和详情页等多个页面，都需要渲染很多的数据，问题来了，在通过当前页面中对应的js文件里面的onLoad函数来监听页面加载，在页面加载的过程中需要请求接口数据，渲染给页面，这其中，会对数据接口发起http请求，考虑到代码的可重用性，我这里封装了一个http请求类，以及请求类中的请求域名js文件，这个文件以后对小程序登录验证等等一系列问题中，需要对openid等等一些参数进行缓存。这边我定义了这3个类。

下面我将3个文件中的代码放在了下面，请看。

一、接口请求域名

为啥需要对请求域名来做js封装了，原因有几点：
1、如果接口更换了域名，我们只需要在这个文件中跟换一下域名就OK了，就不用去各个页面中去一个一个改，因为之前我在工作中碰到过这样的问题，所以总结给大家。
2、提高了代码的可重用性，使代码更加方便整洁。

代码如下：

// 接口请求域名
const domain = 'http://www.xxx.com/api/v1';

export default {
  // 用户授权地址
  userinfo: `${domain}/user/userinfo`,
  // 上传图片
  upfile: `${domain}/user/upfile`,
  // 看房通知
  fangmsg: `${domain}/notices`,
  // 资讯列表
  news:`${domain}/news`
}

二、http请求类

封装这个类，主要是不想写每次重复写，因为我懒，所以写的多了会比较烦，然后及封装了一个，用起来超级爽

代码如下：

// http请求类
export default class Http {
  /**
   * 发起请求
   * @param string url 请求的URL地址
   * @param object data 请求的参数
   * @param string method 请求的HTTP类型
   * @return promise对象  .then来后续操作
   */
  httpReq({ url, token = '', data = {}, method = 'GET' }) {
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        data,
        header: {
          'Authorization': 'Bearer '+token
        },
        method,
        success: ret => resolve(ret)
      });
    })
  }
}

三、缓存类

代码如下：

// 缓存类
class Cache {
  // 构造方法 单位秒
  constructor({ expire = 3600 }) {
    // 成员属性  过期时间
    // 毫秒
    this.expire = new Date().getTime() + expire * 1000;
  }
  // 设置
  set(key, value) {
    let data = { expire: this.expire, value };
    // 设置缓存
    wx.setStorageSync(key, data);
  }
  // 永久
  forever(key, value) {
    let expire = new Date().getTime() + 9999999999 * 1000;
    let data = { expire, value };
    // 设置缓存
    wx.setStorageSync(key, data);
  }
  // 判断是否存在缓存
  has(key) {
    // 获取当前时间
    let time = new Date().getTime();
    // 缓存数据
    let data = wx.getStorageSync(key);
    if (data != '') {
      if (time > data.expire) {  // 缓存过期
        // 删除过期缓存
        wx.removeStorageSync(key);
        return false;
      }
      return true;
    }
    return false;
  }
  // 获取
  get(key) {
    if (this.has(key)) {
      return wx.getStorageSync(key).value;
    }
    return null;
  }
  // 删除
  del(key) {
    wx.removeStorageSync(key);
  }
}
// 导出 有效期1小时
export default new Cache({ expire: 3600 });

四、用法

1、先引入这个js文件
2、注意：一定要new 一下Http这个类
3、在onLoad函数中发起http请求，其中url 参数就可以用我们定义的url.js中的方法来获取，data中传递的参数，比如openid 可以从我们的定义的缓存类中获取，以及token值都可以冲缓存中获取。

直接上代码：

import config from '../../utils/url.js';
import cache from '../../utils/Cache.js';
import Http from '../../utils/Http.js';
const http = new Http;
Page({

  data: {
    // 用户信息
    userinfo: {}
  },

  onLoad(options) {
    // 获取用户的基本信息在自己服务中
    http.httpReq({
      url: config.userinfo,
      data: {
        openid: cache.get('openid')
      },
      token: cache.get('token')
    }).then(ret => {
      // 修改头像
      this.setData({
        userinfo: ret.data
      })
    })
  }
})

大家如果有不懂的问题，欢迎大家留言。

微信小程序封装接口请求域名、http请求类和缓存类