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