成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

使用 js 修飾器封裝 axios

894974231 / 2014人閱讀

摘要：修飾器修飾器是一個(gè)函數(shù)建議是純函數(shù)，它用于修改類(lèi)屬性方法或類(lèi)本身。如果要通過(guò)修飾器傳遞參數(shù)可在修飾器外面封裝一層多層函數(shù)。這意味著，修飾器能在編譯階段運(yùn)行代碼。最后基于修飾器的方便，封裝了一個(gè)的網(wǎng)絡(luò)請(qǐng)求庫(kù)，歡迎大家來(lái)

修飾器

修飾器是一個(gè) JavaScript 函數(shù)（建議是純函數(shù)），它用于修改類(lèi)屬性/方法或類(lèi)本身。修飾器提案正處于第二階段，我們可以使用 babel-plugin-transform-decorators-legacy 這個(gè) Babel 插件來(lái)轉(zhuǎn)換它。

類(lèi)修飾器 
@Dec
class Topic{

}

function Dec(target){
    target.type = "Topic";  // 類(lèi)的靜態(tài)屬性
    target.prototype.type = "topic object"; //類(lèi)的實(shí)例屬性
}

var topic = new Topic();
console.log(Topic.type); // Topic
console.log(topic.type); // topic object

修飾器是一個(gè)對(duì)類(lèi)進(jìn)行處理的函數(shù)。類(lèi)修飾器函數(shù)的第一個(gè)參數(shù)，就是所要修飾的目標(biāo)類(lèi)。
函數(shù)Dec的參數(shù)target，就是被修飾的類(lèi)。如果要在類(lèi)的實(shí)例上添加屬性可通過(guò) target.prototype。
如果要通過(guò)修飾器傳遞參數(shù)可在修飾器外面封裝一層（多層）函數(shù)。

function Decs(type){
    return target => {
        target.type = "Topic" + type;
        target.prototype.type = "topic " + type;
    }
}

注意: 修飾器對(duì)類(lèi)的行為的改變，是代碼編譯時(shí)發(fā)生的，而不是在運(yùn)行時(shí)。這意味著，修飾器能在編譯階段運(yùn)行代碼。也就是說(shuō)，修飾器本質(zhì)就是編譯時(shí)執(zhí)行的函數(shù)

看一個(gè)例子，通過(guò)類(lèi)修飾器給 React 組件添加 axios 實(shí)例：

//App.js
@Create({
    baseURL: "https:xxx.xxx.xxx",
})
class App extends Component{
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.$axios.get("/user?ID=12345");
    }
}

// Create修飾器
const Create = config => (target, property, descriptor) => {
    // 避免在類(lèi)的方法上使用
    if (!descriptor) { 
        target.prototype.$axios = axios.create(config);
    }
}
類(lèi)方法修飾器 
class App extends Component{
    constructor(props) {
        super(props);
    }

    @GET("/user?ID=12345")
    getUser(res) {
        // 
    }
}

// axios get請(qǐng)求簡(jiǎn)單封裝
function GET(url){
    return function(target, name, descriptor) {
        let oldVal = descriptor.value;

        // descriptor.value為當(dāng)前修飾器所修飾的屬性值
        descriptor.value = function(){
            axios.get(url)
                .then((res)=>{
                    oldVal.apply(this, res.data);
                }).catch((err)=>{
                    oldVal.apply(this, {}, err)
                });
        }
    }
}

類(lèi)方法的修飾器函數(shù)一共可以接受三個(gè)參數(shù)，第一個(gè)參數(shù)是類(lèi)的原型對(duì)象，上例是App.prototype，修飾器的本意是要“修飾”類(lèi)的實(shí)例，但是這個(gè)時(shí)候?qū)嵗€沒(méi)生成，所以只能去修飾原型（這不同于類(lèi)的修飾，那種情況時(shí)target參數(shù)指的是類(lèi)本身）；第二個(gè)參數(shù)是所要修飾的屬性名，第三個(gè)參數(shù)是該屬性的描述對(duì)象。

最后

基于decorator（修飾器）的方便，封裝了一個(gè) axios 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，歡迎大家來(lái)star retrofit-cjs

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108252.html

相關(guān)文章

  • vue開(kāi)發(fā)看這篇文章就夠了

    摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴(lài)于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷(xiāo)毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶(hù)界面(UI)的漸進(jìn)式JavaScript框架 庫(kù)和框架的區(qū)別 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...

    fsmStudy 評(píng)論0 收藏0

  • Ajax 如何保證請(qǐng)求接口數(shù)據(jù)符合預(yù)期？如何去重？

    摘要：將的，和包含全部請(qǐng)求參數(shù)的字符串存入管理器。如滿(mǎn)足條件，則當(dāng)前請(qǐng)求不需要發(fā)起。如果參數(shù)不同，或者是人為操作，則視為兩個(gè)不同請(qǐng)求。此時(shí)取消中的，并將當(dāng)前請(qǐng)求重新注冊(cè)。如果不設(shè)置此項(xiàng)，則只會(huì)保留最后一次，前面的請(qǐng)求會(huì)被掉。 先描述兩個(gè)場(chǎng)景： 快速點(diǎn)擊分頁(yè)碼1.2.3.4.5...。假設(shè)網(wǎng)絡(luò)不好或接口速度不佳，此時(shí)可能有多個(gè)pending中請(qǐng)求。而我們無(wú)法控制返回順序。假如用戶(hù)最后點(diǎn)擊到分...

    Darkgel 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    APICloud 評(píng)論0 收藏0

  • vue培訓(xùn)記錄

    在公司做了一次vue相關(guān)的培訓(xùn)，自己整理了一些大綱。供大家參考學(xué)習(xí)！當(dāng)然 優(yōu)先要先看官方文檔 1. 項(xiàng)目構(gòu)成及原理 Vue 主流框架見(jiàn)解及差別 react ALL IN JS 靈活 angular 架構(gòu)清晰 層級(jí)多 重 vue 類(lèi)似react并吸收了angular的一些優(yōu)點(diǎn) Node運(yùn)行在服務(wù)端的JS 谷歌V8引擎 使JS語(yǔ)言能在服務(wù)器端運(yùn)行 Webpack—一個(gè)前端的打包工具 ...

    curlyCheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<