人人做人人干-人人做人人看-人人做人人爽国产视-人人做人人爽人人爱-色屋视频-色屋网

歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司!
電話圖標 余先生:13699882642

網(wǎng)站百科

為您解碼網(wǎng)站建設(shè)的點點滴滴

小程序技能進階回憶錄 - 如何自主實現(xiàn)攔截器

發(fā)表日期:2019-11 文章編輯:小燈 瀏覽次數(shù):4877

窗外,是5月明媚的陽光,澄澈蔚藍的天空,有炮彈歡快地叫著飛過。50多年過去了,我依然如此清晰地記得。

在一些框架中發(fā)現(xiàn)會提供一個很實用的功能:攔截器(interceptor)。例如要實現(xiàn)這個需求:小程序每次獲取到定位后都存到 globalData 里:

wx.getLocation({
  // ..
  success(res) {
    getApp().globalData.location = res
    // ...
  }
})

如果每一處使用 wx.getLocation 的地方都這么寫也沒啥大問題,但總顯得不夠“智能”,一方面是多了重復(fù)代碼,另一方面如果需求變動,獲取到定位后存到別的地方,那要改很多次。

優(yōu)雅的攔截器

有了攔截器,可以更優(yōu)雅的實現(xiàn)它:

intercept('getLocation', {
  success(res) {
    getApp().globalData.location = res
  }
})

只要在一處定義如上的攔截器,其他地方直接用 wx.getLocation 即可。那么,如何實現(xiàn)上面的方式呢?

實現(xiàn) intercept 方法

// utils/intercept.js
// 存儲攔截器定義
var interceptors = {}
function intercept(key, config) {
  intercept[key] = config
}
export {
  intercept,
  interceptors
}

很簡單,暴露出 intercept 方法,定義一個存儲器也一并暴露出去。

代理 wx

要實現(xiàn)使用 wx.getLocation 自動應(yīng)用攔截器,就必須基于原有方法重新定義它。

import { interceptors } from './intercept'

// 備份原有微信方法
var wxBackup = {}
[
  'getLocation'
  // 還可以有很多其他方法 ...
].forEach((key) => {
  wxBackup[key] = wx[key]
  wx[key] = (config) => {
    if (interceptors[key]) {
      // 備份業(yè)務(wù)代碼傳入的回調(diào)方法
      var backup = {}
      var interceptor = interceptors[key]
      [
        'success',
        'fail',
        'complete'
      ].forEach((k) => {
        backup[k] = config[k]
        config[k] = (res) => {
          interceptor[k](res)
          backup[k](res)
        }
      })
    }
    wxBackup[key](config)
  }
})

當(dāng)然,上述代碼用數(shù)組列出了所有可能被定義攔截器的微信函數(shù),也可以使用 Object.keys(wx) 通用處理。

更多使用場景

上面的場景比較簡單,攔截器的應(yīng)用還有更多場景。比如每次請求傳參帶上公參經(jīng)緯度,接口返回的數(shù)據(jù)都會約定包裹在 object 中,請求回來需要取一遍。數(shù)據(jù)異常時還要針對錯誤碼做特定處理,就可以很方便的用攔截器處理:

intercept('request', {
  data(data) {
    var location = getApp().globalData.location
    data.location = location.latitude + ',' + location.longitude
    return data
  },
  success(res) {
    if (res.code == 200) {
      return res.object
    } else {
      if (res.code == 'xxx') {
        // 登錄失效,重新登錄
        // ....
      }
    }
  }
})

注意,攔截器函數(shù)里多了返回值,具體實現(xiàn)方法就不多寫,基于上述實現(xiàn)完善代碼即可。

總結(jié)

細心的讀者可能發(fā)現(xiàn),我們代理或者改造了很多微信提供的方法,有些開發(fā)者可能不喜歡這樣,希望保持原有代碼的純潔性。這要看團隊喜好吧,基于此考慮,主要是不想定義太多新的方法或 api,盡量以大家最為熟悉的方式書寫代碼。


本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得,所有資料僅供用戶學(xué)習(xí)參考,本站不擁有所有權(quán),如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容,請及時與我們聯(lián)系,并提供相關(guān)證據(jù),工作人員會在5工作日內(nèi)聯(lián)系您,一經(jīng)查實,本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.kwpm.com.cn/25245.html
相關(guān)小程序
 八年  行業(yè)經(jīng)驗

多一份參考,總有益處

聯(lián)系深圳網(wǎng)站公司塔燈網(wǎng)絡(luò),免費獲得網(wǎng)站建設(shè)方案及報價

咨詢相關(guān)問題或預(yù)約面談,可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線:余經(jīng)理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

主站蜘蛛池模板: 亚洲伦理中文字幕一区 | 日韩成人一级 | 国内精品久久久久久久久野战 | 中文日韩亚洲欧美制服 | 波多野结衣中文字幕2022免费 | 日本人成年视频在线观看 | 午夜免费在线观看 | 中中文字幕亚州无线码 | 中文字幕亚洲无线码在线一区 | 国产黄色片在线观看 | 欧美一级做一a做片性视频 欧美一级做性受 | 国产a毛片高清视 | 一卡二卡在线 | 亚洲精品成人 | 欧美不卡在线视频 | 在线亚洲成人 | 欧美日韩免费 | 伦理影院在线 | 国产已拍视频 | 国产成人在线视频免费观看 | 欧美一级片网址 | 久久国产亚洲高清观看5388 | 国产成人做受免费视频 | 亚洲麻豆| 韩国黄色影院 | 男女羞羞| 欧美日韩一区二区三区免费不卡 | 成人免费一区二区三区 | 欧美一区二区三区激情视频 | 成人毛片免费观看 | 成人免费国产欧美日韩你懂的 | 欧美日韩一区二区亚洲 | 日韩福利视频高清免费看 | 日本一区二区三区不卡在线视频 | 日韩经典中文字幕 | 男女午夜特黄毛片免费 | 日韩字幕| 性香港xxxxx免费视频播放 | 在线国产不卡 | 欧美在线精品一区二区在线观看 | 成年人精品视频 |