async和await的使用感受

布满荆棘的人生 2023-07-11 08:55 9阅读 0赞

##### 业务场景，单点登录 #####

单点逻辑：从地址栏获取code及相关信息，处理加工后，找到对应接口，发起单点请求

原来逻辑思路：  
1、获取地址栏参数信息  
2、判断code是否存在，不存在，获取后在继续执行  
3、获取单点接口信息  
4、执行单点请求  
这个逻辑有个问题，就是我的初衷是要执行单点，但是现在最开始要获取地址信息，然后一个回调套一个回调，读代码和理解起来，感觉不舒服，总是感觉应该是我需要什么，去拿什么这个思路比较好理解，这个是要重构这块的初衷；  
使用async和await进行重构  
重构后的逻辑思路：  
1、我要进行单点  
2、缺少参数，获取参数  
3、缺少code，获取code  
4、缺少接口信息，获取接口信息  
5、信息都全了，发送请求

两个思路的区别，一个是正向思维，一个是逆向思维，我个人使用逆向思维，要什么再去取什么更好理解一些，正向思维有的时候嵌套太多，会绕懵了

/ 原来逻辑思路
    // 发起请求的主要代码
    function login(cb, urlParams) {
        // 发起单点请求
        fetch(paramData)
        cb()
    }
    
    // 获取api接口
    function getApi (cb, urlParams){
        setTimeout((api) => {
            urlParams.api = api
            login(cb, urlParams)
        }, 1000)
    }
    
    // 获取code
    function getCode(cb, urlParams) {
        setTimeout((code) => {
            urlParams.code=code
            getApi(cb, urlParams)
        }, 1000)
    }
    
    // 获取地址栏信息
    function getUrlParams(cb){
        urlParams = parseQueryString(location.href)
        // 根据code是否进行单点登陆
        if (!urlParams.code) {
            getCode(cb, urlParams)
        }
    }
    
    // 开始调用，进行单点逻辑
    getUrlParams(()=>{})

/ 重构后逻辑思路
    // 发起请求的主要代码
    function login (cb,urlParams) {
        // 发起单点请求
        fetch(paramData)
        cb()
    }
    
    // 获取api接口
    function getApi (urlParams) {
        return new Promise((resolve, reject) => {
            setTimeout((urlParams) => {
                resolve(api)
            }, 1000)
        })
    }
    
    // 获取code
    function getCode () {
        return new Promise((resolve, reject) => {
            setTimeout((code) => {
                resolve(code)
            }, 1000)
        })
    }
    
    // 获取地址栏信息
    function getUrlParams (cb) {
        return parseQueryString(location.href)
    }
    
    async function singon (cb) {
        const urlParams = getUrlParams()
        if (!urlParams.code) {
            urlParams.code = await getCode()
        }
        urlParams.api = await getApi(urlParams)
        login(cb,urlParams)
    }
    
    // 开始调用，进行单点逻辑
    singon(() => { })