摘要：但是在使用過程中，發現這個框架自帶的請求庫特別簡單，于是參照手動封裝了一下，使其支持和攔截器。鏈是個數組，然后把請求攔截器放到真正請求的前面，響應后的攔截器放在真請求的后面。

最近想用全js系統的寫一遍前后端學習一下，就創建了一套TODOList項目練手。當前僅寫完了后端demo，前端正在使用vue。并且準備以后再用react和flutter再寫一遍。
此項目
后端demo

在寫練手項目的時候使用了Framework7這個移動端ui框架，因為這個框架的動畫寫的很厲害所以選擇了它。但是在使用過程中，發現這個框架自帶的ajax請求庫特別簡單，于是參照axios手動封裝了一下，使其支持promise和攔截器。

廢話不多說，上代碼
comover.js

import { Request as F7Request } from "framework7";

// 將原始請求對象封裝成Promise對象
function adapter(config) {
    return new Promise(function(resolve, reject) {
        F7Request({
            url: `${config.baseUrl}${config.url}`,
            method: config.method,
            headers: config.headers,
            data: config.data,
            success(data, status, xhr) {
                resolve({
                    data: JSON.parse(data),
                    status: status,
                    config: config,
                    xhr: xhr
                });
            },
            error(xhr, status) {
                let error = new Error(
                    `Request failed with status code ${status}`
                );
                error.xhr = xhr;
                reject(error);
            }
        });
    });
}

// 發送請求
function dispatchRequest(config) {
    return adapter(config).then(
        function onAdapterResolution(response) {
            return response;
        },
        function onAdapterRejection(reason) {
            return Promise.reject(reason);
        }
    );
}

export default class Comeover {
    interceptors = {};
    requestHandlers = [];
    responseHandlers = [];
    config = {};
    constructor(config = ({ baseUrl = "" } = {})) {
        const self = this;

        this.config = { ...config };

        this.interceptors = {
            request: {
                use(fulfilled, rejected) {
                    self.requestHandlers.push({
                        fulfilled,
                        rejected
                    });
                }
            },
            response: {
                use(fulfilled, rejected) {
                    self.responseHandlers.push({
                        fulfilled,
                        rejected
                    });
                }
            }
        };
        
        // ES6中class內方法運行時綁定上下文
        this.request = this.request.bind(this);
    }
    request(config) {
        // 合并默認config和發送請求時的config
        let inconfig = { ...this.config, ...config };
        
        // 創建Promise鏈
        let chain = [dispatchRequest, undefined];
        // 創建初始Promise鏈中傳遞的promise對象
        let promise = Promise.resolve(inconfig);
        
        // 將攔截器注入Promise鏈
        this.requestHandlers.forEach(interceptor => {
            chain.unshift(interceptor.fulfilled, interceptor.rejected);
        });
        this.responseHandlers.forEach(interceptor => {
            chain.push(interceptor.fulfilled, interceptor.rejected);
        });
        
        // 運行Promise鏈
        while (chain.length) {
            promise = promise.then(chain.shift(), chain.shift());
        }
        
        // 返回最終的promise對象
        return promise;
    }
}

這個例子就是在所有請求前后使用nprogress假裝顯示一下請求進度

import Comeover from "./comeover";
import Np from "nprogress";

const baseUrl = process.env.NODE_ENV === "development" ? "" : /* 上線地址 */ "";

const comeover = new Comeover({ baseUrl });

comeover.interceptors.request.use(
    config => {
        Np.start();
        return config;
    },
    error => {
        Np.done();
        return Promise.reject(error);
    }
);
comeover.interceptors.response.use(
    response => {
        Np.done();
        return response;
    },
    error => {
        Np.done();
        return Promise.reject(error);
    }
);

export { request };

comeover.request({
    url: "/api/login",
    method: "post",
    data: {
        email: this.email,
        password: this.password
    }
})
    .then(({ data }) => {
        this.$store.commit("login", { token: data.message });
        router.back();
    })
    .catch(err => {
        app.dialog.alert("用戶名或密碼錯誤", "登陸失敗");
    });

還可以參照axios繼續封裝多帶帶的get、post等等的方法，這個demo就不寫了。
Promise鏈是個數組，然后把請求攔截器放到真正請求的前面，響應后的攔截器放在真請求的后面。然后以resolve在前，reject在后的順序，成對循環注入到promise.then中。而真正請求的resove和reject是寫在dispatchRequest里的，所以dispatchRequest這里沒有reject，要加一個undefined。
ES6的實例化方法多帶帶使用的時候this指向會有問題，需要多帶帶處理