小程序请求封装、使用

小程序请求封装

1、要了解方法

1.1、wx.request()

wx.request 发起 HTTPS 网络请求。（详情点击wx.request查看官方文档）

1.2、wx.showModal()

wx.showModal 显示模态对话框。（详情点击wx.showModal查看官方文档）

1.3、wx.showLoading()

wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框。（详情点击wx.showLoading查看官方文档）

2、封装

2.1 定义常量信息

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/weixin/api/user/login'
]

2.2 封装方法

2.2.1 封装showModal方法

展示错误信息

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}

2.2.2 封装request方法

发起 HTTPS 网络请求

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}

2.2.3 封装get方法

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)

2.2.4 封装post方法

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)

2.2.5 封装 login 方法

登录微信

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}

2.2.6 封装 getCurPageUrl 方法

获取当前页面url信息

function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

3、完整封装

在项目中创建api文件夹 用于放 request.js(请求封装) 和 index.js(api封装)

request.js

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/xxx/api/xxx/login'
]

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}

/**
 * 获取当前页面url 方法
 */
function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)


module.exports = {
  get,
  post,
  wxLogin
}

index.js

const {
  get,
  post
} = require("./request")

const config = {
  "content-type": "application/x-www-form-urlencoded"
}
const api = {

  // 授权接口
  authorizeLogin: data => post(`/wxMall/xxx/api/xxx/authorizeLogin`, data),

  // 权益销售列表
  rightsSaleList: data => get(`/wxMall/xxx/list`, data, config),

  // 权益订单列表
  rightsOrderList: data => get(`/wxMall/xxx/list`, data),

  ...

};
module.exports = {
  ...api
}

4、使用

// 引入
const { rightsSaleList } = require("../../api/index")


Page({
  data:{
    pageNum: 1, 
    pageSize: 10, 
  },
  async getList(){
    const { pageNum, pageSize } = this.data;
    const params = { pageNum, pageSize};
    // 使用
    const res = await rightsSaleList(params);
    console.log(res)
  }
})