小程序封装request请求

为什么需要封装

小程序原生的http请求方式略有生硬，不封装下，感觉就像在撸jquery的ajax一样。而且，我们如果要做请求拦截，jwt鉴权的时候，也会有封装request的要求的。

封装基础http service

封装常用的 get post put delete 等方法 在这里我们可以做路由拦截 也可以配后后端做鉴权

/**
 * 经过艰难的抉择 关于模块选择用 es6的模块导入导出模式 不用小程序的模块导入导出
 * const app = getApp(); 这个只有在小程序初始化完成 app才会有值 所以我们不能在app.js 里面使用这个封装的请求库
 */
const app = getApp();

export class BaseService {
  constructor() { }

  // get 方法
  get(url) {
    return this.request('GET', url);
  }

  // post 方法
  post(url, data) {
    return this.request('POST', url, data);
  }

  // put 方法
  put(url, data) {
    return this.request('PUT', url, data);
  }

  // 请求的根方法 这里的一些配置从 app 里面读的 我们也可以从配置项里面读取
  async request(method, url, data) {
  	// 这里就栽在做请求的拦截
    return await new Promise((resolve, reject) => {
      wx.request({
        url: `https://${app.globalData.apiUrl}/${url}`,
        data: data || null,
        method: method || 'GET',
        header: {
        	// 这里可以配合后端做鉴权
          'ticket': app.globalData.ticket || null
        },
        success: (res) => {
          // 这里需要做响应拦截的
          if (res.statusCode < 400) {
            resolve(res.data);
          } else {
            wx.showToast({
              title: url.split('/')[2] + ';' + (res.data.Message || JSON.stringify(res.data)),
              icon: 'none',
              duration: 3000
            })
            reject(res.data)
          }
        },
        fail: (err) => {
          // 这里的失败一般指网络失败 请求没发出去的失败
          reject(err);
        }
      })
    })
  }
}

封装常用的业务 http service

import { BaseService } from './base';
const baseService = new BaseService();

export class TokenService {
  constructor() { }
  // 获取 ticket
  getTicket(data) {
    return baseService.post(`api/WebSocketService/GetWeChatUserToken`, data);
  }

  // 获取 code
  async wxLogin() {
    return await new Promise((resolve, reject) => {
      wx.login({
        success(res) {
          resolve(res.code);
        },
        fail(err) {
          reject(err)
        }
      })
    })
  }
}

在具体业务代码中调用

import { TokenService } from '../../apiservices/token';
const tokenService = new TokenService();

Page({
  data: {
    code: '',
    info: null
  },
  onLoad() {
  	// 获取 code
    tokenService.wxLogin().then(res => {
    	this.data.code = res.code
    })
  },
  getUserInfo: function(e) {
    if (e.detail.errMsg === 'getUserInfo:ok') {
      this.data.info = e.detail
      this.setData({
        hasUserInfo: true
      })
      this.getAuth();
    } else {
      wx.showToast({
        title: '为了体验更好的功能，请您重新授权',
        icon: 'none',
        duration: 2000
      })
    }
  },
  getAuth() {
  	const models = {...this.data.info, code: this.data.code}
  	tokenService.getTicket(models).then(res => {
    	console.log(res.data.ticket)
    	console.log(res.data.openId)
    	console.log(res.data.unionId)
    })
  }
})