小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件的實(shí)現(xiàn)
開發(fā)小程序,封裝有一個(gè)簡單易用wx.request請(qǐng)求還是很必要的,可以省去大量的維護(hù)成本!閑話不多說,直接擼代碼。
流程
- 創(chuàng)建http.js文件,封裝wx.request
- 創(chuàng)建api.js文件,統(tǒng)一管理所有接口
- 在index.js中調(diào)用接口
創(chuàng)建http.js文件,封裝wx.request
在utils中創(chuàng)建http.js文件,封裝http,代碼如下:
module.exports = {
http(url, method, params) {
let token = 'token' // 獲取token,自行獲取token和簽名,token和簽名表示每個(gè)接口都要發(fā)送的數(shù)據(jù)
let sign = 'sign' // 獲取簽名
let data = {
token,
sign
}
if(params.data){ // 在這里判斷一下data是否存在,params表示前端需要傳遞的數(shù)據(jù),params是一個(gè)對(duì)象,有三組鍵值對(duì),data:表示請(qǐng)求要發(fā)送的數(shù)據(jù),success:成功的回調(diào),fail:失敗的回調(diào),這三個(gè)字段可缺可無,其余字段會(huì)忽略
for (let key in params.data) { // 在這里判斷傳過來的參數(shù)值為null,就刪除這個(gè)屬性
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', // 判斷請(qǐng)求類型,除了值等于'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文件,作為接口管理文件,代碼如下:
// 在這里面定義所有接口,一個(gè)文件管理所有接口,易于維護(hù)
import {http} from './http'; // 引入剛剛封裝好的http模塊,import屬于ES6的語法,微信開發(fā)者工具必須打開ES6轉(zhuǎn)ES5選項(xiàng)
function femaleNameApi(params){ // 請(qǐng)求隨機(jī)古詩詞接口
http('/femaleNameApi','get',params) // 接口請(qǐng)求的路由地址以及請(qǐng)求方法在此處傳遞
}
// 每一個(gè)接口定義一個(gè)函數(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('接口請(qǐng)求成功',res)
this.setData({
femaleList:res.data
})
},
fail:err=>{
console.log(err)
}
})
}
})
參數(shù)傳入說明:
- 為了和微信的API接口調(diào)用方式看起來一致,故采用了微信API的這種調(diào)用方式
- 傳遞一個(gè)對(duì)象,對(duì)象有三組鍵值對(duì),data:表示要發(fā)送的數(shù)據(jù),success:成功回調(diào),fail:失敗回調(diào)
- 三個(gè)鍵值對(duì)均可傳可不傳,其余值會(huì)忽略,基本和微信API調(diào)用方式一致,減少了強(qiáng)迫癥的煩惱
小程序代碼片段放在github上了,歡迎issue
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
JavaScript中Math對(duì)象相關(guān)知識(shí)全解
Math對(duì)象中的方法很常用,來跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對(duì)象相關(guān)知識(shí)全解的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JavaScript實(shí)現(xiàn)事件總線(Event?Bus)的方法詳解
Event?Bus?事件總線,通常作為多個(gè)模塊間的通信機(jī)制,相當(dāng)于一個(gè)事件管理中心。本文將介紹如何在JavaScript中實(shí)現(xiàn)事件總線,需要的可以參考一下2022-05-05
JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類型中,是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值,即undefined 和 null。2010-10-10
JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過javascript針對(duì)table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡單實(shí)用,需要的朋友可以參考下2017-09-09

