Taro - Http请求封装（微信小程序、H5）

1. 为何做网络请求封装

那代码中我们比较关注什么？
1.请求的参数，访问的接口
2.GET/POST...请求方式
3.请求参数统一处理（比如：加密、设置公共参数...）
4.请求成功返回的数据（比如：解密、抽离逻辑层数据）
5.请求失败反馈

我们不关注什么？
1.请求url（一般固定的配置在某个地方）
2.根据不同的接口规则做不同的请求参数（比如：参数加密等）
...

让我们代码实操，借助Taro.request()封装自己的网络请求
network.js

/**
 * 声明请求对象
 */
let requestHandler = {
  params: {},
  closeLoading: false, //默认显示Toast，如果设置true则不会显示Toast
  success: function (res) {
    // success
  },
  fail: function () {
    // fail
  },
}
/**
 * GET请求
 * @param {*} requestHandler 
 */
export async function GET(requestHandler) {
  httpRequest('GET', requestHandler)
}
/**
 * POST请求
 * @param {*} requestHandler 
 */
export async function POST(requestHandler) {
  httpRequest('POST', requestHandler)
}
/**
 * http request 请求
 * @param {http method} method 
 * @param {*} requestHandler 
 */
export async function httpRequest(method, requestHandler) {
  //注意：可以对params签名等处理
  let params = requestHandler.params
  params = apiParamSign(params)
  let closeLoading = requestHandler.closeLoading

  if (!closeLoading) {
    Taro.showLoading({
      title: '加载中',
      mask: true,
    })
  }

  Taro.request({
    url: API_BASE_URL,
    data: params,
    method: method,// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    // responseType: 'text',
    // credentials: 'include',
    header: {
      'content-type': 'application/x-www-form-urlencoded', // 默认值
    },
    mode: 'no-cors',
    success: function (res) {
      console.log('request success!')
      console.log(res.data)
      if (!closeLoading) {
        Taro.hideLoading()
      }
      if (res.data.status == 'success') {
        requestHandler.success(res.data)
      } else if (res.data.status == 'error') {
        //错误回调处理
        requestHandler.fail()
        Taro.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      } else {
        //请他情况当成失败处理
        requestHandler.fail()
      }


    },
    fail: function (res) {
      console.log('request failed!')
      if (!closeLoading) {
        Taro.hideLoading()
      }
      //错误回调处理
      requestHandler.fail()
    }
  })

}

/**
 * 系统参数和功能参数做签名（按照服务端接口标准制定）
 * @param {传入功能参数} params 
 */
function apiParamSign(params) {
  let sysParams = {}
  let date = new Date();
  let month = date.getMonth() + 1
  sysParams.date = date.getFullYear() + "-" + month + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();;
  // data.task = date.getTime();

  sysParams.version = '1.0'
  sysParams.format = 'json'
  sysParams.flag = 'dev_flag'

  let data = {}
  //合并对象
  Object.assign(data, sysParams, params)

  let keys = []
  for (var k in data) {
    if (data.hasOwnProperty(k)) {
      keys.push(k);
    }
  }
  keys.sort();
  let paramsStr = "";
  for (var i = -0; i < keys.length; i++) {
    paramsStr += keys[i];
    paramsStr += data[keys[i]];
  }
  let tmp = md5(paramsStr).toUpperCase() + API_BASE_TOKEN;
  tmp = md5(tmp).toUpperCase();
  data.sign = tmp;
  return data;
}

2. 代码实操

import { POST } from '../../api/network'

 const params = {}
    params.method = API_USER_LOGIN_TEST
    params.user_name = this.state.name
    params.password = this.state.password
    POST({
      params: params,
      closeLoading: true,
      success: function (res) {

      },
      fail: function () {

      }
    })

最后编辑于：2020.05.30 15:46:46