一三八、代码优化篇，函数缓存（单例+代理）

场景：每次接口请求依赖服务端接口或者客户端返回pnone字段，并且可能短时间多次请求。
一种处理方式是返回值后使用全局状态管理，每次使用判断全局有没有
另一种方式就是缓存这个函数，以及返回值，每次调用这个函数如果有值就直接返回缓存的结果

代码实现

export class ApiEvent {
    constructor(name) {
        this.name = name;
        this.result = null;
        this.flag = false;
        this.callBack = [];
    }

    publish() {
        this.callBack.forEach(item => {
            item(this.result);
        });
        this.callBack = [];
    }

    register(callBack) {
        this.callBack.push(callBack);
    }
}

export function finallCallBack(target, res) {
    target.result = res;
    target.publish();
}

export function checkApiEventStatus(target, callback, resolve) {
    if (target.flag && target.result) {
        resolve(target.result);
    } else if (target.flag) {
        target.register(result => {
            resolve(result);
        });
    } else {
        target.flag = true;
        callback();
    }
}

使用示例

import {ApiEvent, finallCallBack, checkApiEventStatus} from './ApiEvent';

const phoneCallBack = new ApiEvent('phoneCallBack');
function getPhone() {
    return new Promise(resolve => {
        checkApiEventStatus(
            phoneCallBack,
            () => {
                swan?.iovauto?.getPhone({
                    success(phone) {
                        console.log(' > success > phone', phone);
                        resolve(phone);
                        finallCallBack(phoneCallBack, phone);
                    },
                    fail(err) {
                        phoneCallBack.flag = false;
                        resolve();
                        finallCallBack(phoneCallBack);
                        swan.showToast({
                            icon: 'none',
                            title: '获取手机号失败'
                        });
                    }
                });
            },
            resolve
        );
    });
}

getPhone().then(res => {
    console.log(' > 第一次调用 > res1', res);
});
getPhone().then(res => {
    console.log(' > 第二次调用 > res2', res);
});
getPhone().then(res => {
    console.log(' > 第三次调用 > res2', res);
});

log结果

总结

从log结果可以看出getPhone调用了三次，swan?.iovauto?.getPhone方法只被调用了一次，后面两次都是从缓存里获取的值，可以有效减轻服务端/客户端 api的调用次数，减少调用时间，从而达到性能优化的目的。