使用 js 修飾器封裝 axios

894974231 發(fā)布于2019-08-26 12:13 / 2047人閱讀

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

修飾器

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

類修飾器

@Dec
class Topic{

}

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

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

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

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

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

看一個例子，通過類修飾器給 React 組件添加 axios 實例：

//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) => {
    // 避免在類的方法上使用
    if (!descriptor) { 
        target.prototype.$axios = axios.create(config);
    }
}

類方法修飾器

class App extends Component{
    constructor(props) {
        super(props);
    }

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

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

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

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

最后

基于decorator（修飾器）的方便，封裝了一個 axios 的網(wǎng)絡請求庫，歡迎大家來star retrofit-cjs

云服務器 GPU云服務器修飾器 Python修飾器 python類修飾器 js封裝

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108252.html

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

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

fsmStudy 2019-08-21 18:37 評論0 收藏0
Ajax 如何保證請求接口數(shù)據(jù)符合預期？如何去重？

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

Darkgel 2019-08-23 17:06 評論0 收藏0
VUE知識點集錦

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

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

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

APICloud 2019-08-02 14:34 評論0 收藏0
vue培訓記錄

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

curlyCheng 2019-08-23 16:27 評論0 收藏0