2020-04-22  250 次浏览 评论

微信小程序封装request请求

 标签:

前言

在小程序(其他)开发过程中,我们会遇到很多请求,如果每次都去写一遍。

尤其是同一个接口好几个地方都要使用,有一点变动就需要全部找出来一个一个改
很不方便维护

所以我们就封装一下,统一管理吧~

封装

// 统一设置URL路径
const BASE_URL = "http://localhost:8002";
// 定义http请求方法
const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const DELETE = 'DELETE';

// 封装代码,由于项目需要所以增加header参数。
function request(method, url, header, data) {
  return new Promise(function(resolve, reject) {
    wx.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      header: header,
      success(res) {
        //判断状态码---errCode状态根据后端定义来判断
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res);
        } else {
          //其他异常
          reject(res);
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}

//特殊需求,如果不需要则直接使用上面封装请求就够了。

function jsonRequest(method, url, data) {
  // 获取token放到header中提供给后端
  // 此处获取localStorage中是否含有token
  try {
    var value = wx.getStorageSync('Authorization')
    if (value) {
      return request(method, url, {
        'content-type': 'application/json',
        'Authorization': value,
      }, data);
    }
  } catch (e) {
    // Do something when catch error
  }
  return request(method, url, {
    'content-type': 'application/json'
  }, data);
}
// 封装了content-type为x-www-form-urlencoded情况
function formRequest(method, url, data) {
  return request(method, url, {
    'content-type': 'x-www-form-urlencoded'
  }, data);
}

使用

  • 在小程序util文件夹下新建request.js,并将上述代码放进去,创建请求,并导出。
//衔接上面代码
const API = {
  // 查看登录状态
  getOpenid: (data) => jsonRequest(GET, `/login/wechat?code=${data}`),
  // 登录
  login: (data) => formRequest(POST, `/login/wechat?code=${data.code}&username=${data.username}&password=${data.password}`)
};
module.exports = {
  API: API
}
  • 在.js文件里引入下request.js的API
const $request = require('../../utils/request.js').API;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 授权状态
    authorize: false,
    username: '',
    password: '',
    // 角色信息
    roleList: []
  },
  // 查看登录状态
  checkLogin: function(code) {
    $request.getOpenid(code)
      .then(res => {
        //请求成功
      })
      .catch(err => {
        // 请求失败
      })
  }
})

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: