使用 js 修飾器封裝 axios

894974231 發布于2019-08-26 12:13 / 1987人閱讀

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

修飾器

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

類修飾器

@Dec
class Topic{

}

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

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

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

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

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

看一個例子，通過類修飾器給 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)
                });
        }
    }
}

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

最后

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108252.html

vue開發看這篇文章就夠了

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

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

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

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

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

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

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

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

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

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