開發(fā)小程序,封裝有一個簡單易用wx.request請求還是很必要的,可以省去大量的維護成本!閑話不多說,直接擼代碼。
流程
創(chuàng)建http.js文件,封裝wx.request
在utils中創(chuàng)建http.js文件,封裝http,代碼如下:
module.exports = { http(url, method, params) { let token = 'token' // 獲取token,自行獲取token和簽名,token和簽名表示每個接口都要發(fā)送的數(shù)據(jù) let sign = 'sign' // 獲取簽名 let data = { token, sign } if(params.data){ // 在這里判斷一下data是否存在,params表示前端需要傳遞的數(shù)據(jù),params是一個對象,有三組鍵值對,data:表示請求要發(fā)送的數(shù)據(jù),success:成功的回調(diào),fail:失敗的回調(diào),這三個字段可缺可無,其余字段會忽略 for (let key in params.data) { // 在這里判斷傳過來的參數(shù)值為null,就刪除這個屬性 if (params.data[key] == null || params.data[key] == 'null') { delete params.data[key] } } data = {...data,...params.data} } wx.request({ url:'https://www.apiopen.top'+url, // 就是拼接上前綴,此接口域名是開放接口,可訪問 method:method=='post'?'post':'get', // 判斷請求類型,除了值等于'post'外,其余值均視作get data, header: { 'content-type': 'application/json' }, success(res) { params.success&ms.success(res.data) }, fail(err) { params.fail&ms.fail(err) } }) }}代碼很簡單,需要說的是在邏輯代碼中只需要傳遞params,而url和method在接口文件中傳遞,方便統(tǒng)一管理
創(chuàng)建api.js文件,統(tǒng)一管理所有接口
在utils下創(chuàng)建api.js文件,作為接口管理文件,代碼如下:
// 在這里面定義所有接口,一個文件管理所有接口,易于維護import {http} from './http'; // 引入剛剛封裝好的http模塊,import屬于ES6的語法,微信開發(fā)者工具必須打開ES6轉(zhuǎn)ES5選項function femaleNameApi(params){ // 請求隨機古詩詞接口 http('/femaleNameApi','get',params) // 接口請求的路由地址以及請求方法在此處傳遞}// 每一個接口定義一個函數(shù),然后暴露出去,供邏輯代碼調(diào)用function novelApi(params){ // 小說推薦接口 http('/novelApi','get',params) }export default { // 暴露接口 femaleNameApi, novelApi}用api.js文件統(tǒng)一管理的好處就是,當(dāng)接口更新后修改很方便,不需要看邏輯代碼,也不用關(guān)心有幾處調(diào)用了此接口,直接在app.js中修改響應(yīng)就行了,接口統(tǒng)一管理是非常有必要的
在index.js中調(diào)用接口
調(diào)用方式,代碼如下
import http from '../utils/api' // 引入api接口管理文件Page({ data: { femaleList:[] }, onLoad: function () { http.femaleNameApi({ // 調(diào)用接口,傳入?yún)?shù) data:{ page:1 }, success:res=>{ console.log('接口請求成功',res) this.setData({ femaleList:res.data }) }, fail:err=>{ console.log(err) } }) }})參數(shù)傳入說明:
小程序代碼片段放在github上了,歡迎issue
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點
疑難解答