从合并请求角度谈性能优化

技术分享4年前 (2020)更新 技术分享
2,165 0 0

从合并请求角度谈性能优化

  性能优化是前端非常重要的一块,可下手的地方有很多,比如图片层次、JS层次、webpack工程层次、CSS层次、CDN层次等等,其中关于请求的优化是整个项目运行中非常重要的一块,所以这次我们来讲一下请求优化的一个小方法。

来看需求

  最近在一个React项目中有看见一个类似结构的代码,其中reqData、reqListData、reqProData是三个函数,内部分别有三个不同的Promise请求,请求获得数据后,将数据保存至this.state中。

componentDidMount() {
    this.reqData();
    this.reqListData();
    this.reqProData();
}

/**
 * 第一个请求
 **/
reqData() {
    ajax.getData().then(res => {
        // do something with this.setState({})
    })
}

/**
 * 第二个请求
 **/
reqListData() {
    ajax.getListData().then(res => {
        // do something with this.setState({})
    })
}

/**
 * 第三个请求
 **/
reqProData() {
    ajax.getProData().then(res => {
        // do something with this.setState({})
    })
}

  事实上,这段代码是没有问题的,毕竟在这个需求中,这三个返回的数据都是互不干扰互不联系的,但是在我们开发的过程中,我们需要有想到可能日后在每个地方都会有变动的地方,假如在后续开发中,我们在第二个请求的时候,需要根据第一个请求返回的数据进行判断再插入this.state中呢?这是一个非常有可能性的需求。

  而且值得注意的是,这是一个React项目,使用this.setState的时候,会触发render方法重新渲染你的界面(这里不考虑其他的,如shouldComponentUpdate等情况),那么这样来构建代码,会产生非常多次的无必要的render,严重影响性能。

  那么我们的需求就很清晰了,我们需要将多次的render缩减为一次,并使得请求返回的数据能够互相有业务逻辑来往,所以在这里,我们选择使用Promise.all

Promise.all

  Promise.all大家应该不陌生,作为ES6中作为Promise的伴生静态方法,他有一个显著功效:将多个Promise对象实例包装,生成并返回一个新的Promise实例。

  使用这个方法,你可以将多个的Promise以数组参数的形式传入,当所有Promise实例全部(注意是全部)变为resolve后,该方法才会返回,并可在then方法中获得一个数组形式的结果,你可以使用数组解构的方法轻松获取这些参数

// 使用方法
Promise.all([p1, p2, p3]).then(function (results) {
    let [res1, res2, res3] = results;
});

  下面的是博主给大家写的示例,让大家简单的了解一下这个Promise.all的使用方法。

// 示例
let promise1 = new Promise(function (resolve, reject) {
    if (true) {
        resolve(1);
    } else {
        reject(false);
    }
});
let promise2 = new Promise(function (resolve, reject) {
    if (true) {
        resolve(2);
    } else {
        reject(false);
    }
});
let promise3 = new Promise(function (resolve, reject) {
    if (true) {
        resolve(3);
    } else {
        reject(false);
    }
});

Promise.all([promise1, promise2, promise3]).then(function (results) {
    let [res1, res2, res3] = results;
    console.log(res1);
    console.log(res2);
    console.log(res3);
    if (res2 === 2) {
        console.log(res3 * 3);
    }
    // do something with this.setState({})
});
解决

  OK那么接下来方向就很明确了,于是我将componentDidMount中的代码修改成了以下的结构。


componentDidMount() {
    // ajax此处的ajax只是自己的封装,实际上ajax.reqData()等参数还是 Promise 格式
    Promise.all([ajax.getData(), ajax.getListData(), ajax.getProData()]).then((results) => {
        const [res1, res2, res3] = results;
        // 将结果作为参数传入,根据内部逻辑返回需要setState的数据
        const { data } = this.reqDataFormat(res1);
        const { list } = this.reqListDataFormat(res2);
        const { pro } = this.reqProDataFormat(res3);
        if (list) {
            // pro = list.res;
            // Do something with side effects
        }
        this.setState({ data, list, pro })
    });
}

  合并请求后根据测试,耗时不增反而略有下降,可读性上升,减少三次rander,性能提高。

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...