小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件的實(shí)現(xiàn)
開發(fā)小程序,封裝有一個(gè)簡(jiǎn)單易用wx.request請(qǐng)求還是很必要的,可以省去大量的維護(hù)成本!閑話不多說(shuō),直接擼代碼。
流程
- 創(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è)字段可缺可無(wú),其余字段會(huì)忽略 for (let key in params.data) { // 在這里判斷傳過(guò)來(lái)的參數(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, // 就是拼接上前綴,此接口域名是開放接口,可訪問(wèn) 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) } }) } }
代碼很簡(jiǎn)單,需要說(shuō)的是在邏輯代碼中只需要傳遞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的語(yǔ)法,微信開發(fā)者工具必須打開ES6轉(zhuǎn)ES5選項(xiàng) function femaleNameApi(params){ // 請(qǐng)求隨機(jī)古詩(shī)詞接口 http('/femaleNameApi','get',params) // 接口請(qǐng)求的路由地址以及請(qǐng)求方法在此處傳遞 } // 每一個(gè)接口定義一個(gè)函數(shù),然后暴露出去,供邏輯代碼調(diào)用 function novelApi(params){ // 小說(shuō)推薦接口 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ù)傳入說(shuō)明:
- 為了和微信的API接口調(diào)用方式看起來(lái)一致,故采用了微信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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11JavaScript中Math對(duì)象相關(guān)知識(shí)全解
Math對(duì)象中的方法很常用,來(lái)跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對(duì)象相關(guān)知識(shí)全解的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JavaScript實(shí)現(xiàn)事件總線(Event?Bus)的方法詳解
Event?Bus?事件總線,通常作為多個(gè)模塊間的通信機(jī)制,相當(dāng)于一個(gè)事件管理中心。本文將介紹如何在JavaScript中實(shí)現(xiàn)事件總線,需要的可以參考一下2022-05-05JavaScript高階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-10JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過(guò)javascript針對(duì)table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-09-09