使用 js 修飾器封裝 axios

修飾器

修飾器是一個 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

來源：https://segmentfault.com/a/1190000016036391