Taro - Http請(qǐng)求封裝(微信小程序、H5)

1. 為何做網(wǎng)絡(luò)請(qǐng)求封裝

那代碼中我們比較關(guān)注什么?
1.請(qǐng)求的參數(shù),訪問的接口
2.GET/POST...請(qǐng)求方式
3.請(qǐng)求參數(shù)統(tǒng)一處理(比如:加密、設(shè)置公共參數(shù)...)
4.請(qǐng)求成功返回的數(shù)據(jù)(比如:解密、抽離邏輯層數(shù)據(jù))
5.請(qǐng)求失敗反饋

我們不關(guān)注什么?
1.請(qǐng)求url(一般固定的配置在某個(gè)地方)
2.根據(jù)不同的接口規(guī)則做不同的請(qǐng)求參數(shù)(比如:參數(shù)加密等)
...

讓我們代碼實(shí)操,借助Taro.request()封裝自己的網(wǎng)絡(luò)請(qǐng)求
network.js

/**
 * 聲明請(qǐng)求對(duì)象
 */
let requestHandler = {
  params: {},
  closeLoading: false, //默認(rèn)顯示Toast,如果設(shè)置true則不會(huì)顯示Toast
  success: function (res) {
    // success
  },
  fail: function () {
    // fail
  },
}
/**
 * GET請(qǐng)求
 * @param {*} requestHandler 
 */
export async function GET(requestHandler) {
  httpRequest('GET', requestHandler)
}
/**
 * POST請(qǐng)求
 * @param {*} requestHandler 
 */
export async function POST(requestHandler) {
  httpRequest('POST', requestHandler)
}
/**
 * http request 請(qǐng)求
 * @param {http method} method 
 * @param {*} requestHandler 
 */
export async function httpRequest(method, requestHandler) {
  //注意:可以對(duì)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', // 默認(rèn)值
    },
    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') {
        //錯(cuò)誤回調(diào)處理
        requestHandler.fail()
        Taro.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      } else {
        //請(qǐng)他情況當(dāng)成失敗處理
        requestHandler.fail()
      }


    },
    fail: function (res) {
      console.log('request failed!')
      if (!closeLoading) {
        Taro.hideLoading()
      }
      //錯(cuò)誤回調(diào)處理
      requestHandler.fail()
    }
  })

}

/**
 * 系統(tǒng)參數(shù)和功能參數(shù)做簽名(按照服務(wù)端接口標(biāo)準(zhǔn)制定)
 * @param {傳入功能參數(shù)} 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 = {}
  //合并對(duì)象
  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. 代碼實(shí)操

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 () {

      }
    })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容