国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件的實(shí)現(xiàn)

2019-11-19 11:41:01
字體:
供稿:網(wǎng)友

開發(fā)小程序,封裝有一個(gè)簡(jiǎn)單易用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)   }  }) }}

代碼很簡(jiǎn)單,需要說的是在邏輯代碼中只需要傳遞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){ // 小說推薦接口 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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 庐江县| 乐平市| 勃利县| 凤阳县| 兴义市| 芜湖市| 崇义县| 吉水县| 乐业县| 满洲里市| 定安县| 黄陵县| 军事| 东乌珠穆沁旗| 无极县| 黄山市| 微博| 灵山县| 龙海市| 广平县| 衢州市| 玛多县| 丽水市| 太和县| 崇仁县| 日喀则市| 惠州市| 大姚县| 杂多县| 潼南县| 九寨沟县| 阿瓦提县| 莫力| 台湾省| 罗甸县| 垫江县| 乐至县| 游戏| 枞阳县| 黑河市| 芷江|