亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2019年04月29日 10:18:04   作者:前端李會(huì)旺  
這篇文章主要介紹了小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件

開發(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&&params.success(res.data)
   },
   fail(err) {
    params.fail&&params.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)文章

  • Canvas放置反彈效果隨機(jī)圖形(實(shí)例)

    Canvas放置反彈效果隨機(jī)圖形(實(shí)例)

    下面小編就為大家?guī)?lái)一篇Canvas放置反彈效果隨機(jī)圖形(實(shí)例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • JavaScript如何借用構(gòu)造函數(shù)繼承

    JavaScript如何借用構(gòu)造函數(shù)繼承

    這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • JavaScript中Math對(duì)象相關(guān)知識(shí)全解

    JavaScript中Math對(duì)象相關(guān)知識(shí)全解

    Math對(duì)象中的方法很常用,來(lái)跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對(duì)象相關(guān)知識(shí)全解的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • JavaScript實(shí)現(xiàn)事件總線(Event?Bus)的方法詳解

    JavaScript實(shí)現(xiàn)事件總線(Event?Bus)的方法詳解

    Event?Bus?事件總線,通常作為多個(gè)模塊間的通信機(jī)制,相當(dāng)于一個(gè)事件管理中心。本文將介紹如何在JavaScript中實(shí)現(xiàn)事件總線,需要的可以參考一下
    2022-05-05
  • 不用一句js代碼初始化組件

    不用一句js代碼初始化組件

    不用一句js代碼初始化組件,是不是很神奇?
    2016-01-01
  • JavaScript高階API數(shù)組reduce函數(shù)使用示例

    JavaScript高階API數(shù)組reduce函數(shù)使用示例

    這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 理解Javascript_02_理解undefined和null

    理解Javascript_02_理解undefined和null

    其實(shí)在 ECMAScript 的原始類型中,是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值,即undefined 和 null。
    2010-10-10
  • TypeScript 中接口詳解

    TypeScript 中接口詳解

    TypeScript核心設(shè)計(jì)原則之一就是類型檢查,通過(guò)使用接口(Interfaces)可以進(jìn)行類型檢查,滿足傳統(tǒng)面向?qū)ο笏枷?,利于有效開發(fā),有效避免類型轉(zhuǎn)換問(wèn)題。
    2015-06-06
  • JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】

    JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過(guò)javascript針對(duì)table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2017-09-09
  • 詳解js中call與apply關(guān)鍵字的作用

    詳解js中call與apply關(guān)鍵字的作用

    本文主要介紹js中call與apply關(guān)鍵字的作用以及它們的用法,具體實(shí)例如下,希望對(duì)大家有所幫助
    2016-11-11

最新評(píng)論