单页应用如何组织请求

Question

需求

正在开发一个电商web应用，前端采用的是React，Redux，由于采用前后端分离的方式，需要发起很多ajax/fecth请求

问题

• 后端返回都会携带状态码，都需要进行判断，如何优雅有效的去处理这些请求？

• 这些发送请求的代码如何组织便于维护

• 每个请求还需要携带jwt验证字符串，这是保存在state里，而只有container组件才能访问state

我的理解

• 如果把请求写在各自的组件里，自己进行判断处理，感觉产生很多重复的代码，例如各种状态码判断，各个组件都是独立的文件，对后期的修改请求域名等是否也会造成麻烦；

• 把所有的请求都写在一个文件里然后在需要的组件里进行import

Answer 1

一般情况下我会把原始的 ajax 请求进行一次封装，对常见的一些错误在这里先处理了。因为没用过 Redux，所以我以 jQuery 为例：

class App {
    ajax(url, data, options) {
        const settings = $.extend({
            type: "post",
            dataType: "json"
        }, options);
        settings.data = $.extend(settings.data, data);

        // 准备返回新的 promise
        var deffered = $.Deferred();
        $.ajax(url, settings)
            .done(function(jo) {
                if (isCommonError(jo)) {
                    // 处理常规错误
                    deferred.reject({
                        type: "business error",
                        err: jo
                    });
                } else {
                    // 没有错误的情况
                    // 如果这里需要对正常返回的数据进行初步处理，也可以
                    // 可以 resolve(dealedJo)
                    deferred.resolve(jo);
                }
            })
            .fail(function(err) {
                // 处理 ajax 调用的异常，比如 500 啊，之类的
                deferred.reject({
                    type: "ajax error",
                    err: err
                });
            });

        return deffered.promise();
    }
}

const app = window.app = new App();

Answer 2

自己封装基础的 request，里面挂上钩子，统一处理错误 / Token 等业务无关逻辑