React中if条件内await无效果问题排查及优化

原代码里await autoriza()无效的核心问题是：autoriza函数没有返回Promise对象。

fetch本身是异步操作，会返回一个Promise，但你的autoriza函数只是调用了fetch并链式调用.then，却没有把这个Promise链返回出去。当你用await去等待一个没有返回值的函数时，相当于等待的是undefined，JavaScript会直接跳过等待，继续执行后面的fc_volta()和history('/')，完全不会等fetch请求完成。

原代码的修正方法很简单，给autoriza加上返回值：

const voltar = async (argumento) => {
    if(argumento == "autoriza"){
        await autoriza()
    }
    fc_volta();
    history('/')
}

const autoriza = () => {
    // 加上return，把fetch的Promise返回出去
    return fetch('https://api.github.com/users/someuser/repos')
    .then(resposta => resposta.json())
    .then(dados => console.log(dados)) 
}

你把代码合并成一个函数的思路没问题，但这个写法依然存在原问题：fetch的异步请求还没完成，fc_volta()和history('/')就已经执行了。如果你的需求是必须等请求完成后再执行页面跳转和fc_volta，那这个写法并不正确。

正确的处理方式有两种：

1. 用await等待fetch完成（推荐，代码更清晰）：

const voltar = async (argumento) => {
    if(argumento == "autoriza"){
        const resposta = await fetch('https://api.github.com/users/someuser/repos');
        const dados = await resposta.json();
        console.log(dados);
    }
    fc_volta();
    history('/')
}

2. 如果坚持用.then链式调用，需要把后续操作放到最后一个.then里（仅当需要等待请求完成再执行跳转时）：

const voltar = (argumento) => {
    if(argumento == "autoriza"){
        fetch('https://api.github.com/users/someuser/repos')
        .then(resposta => resposta.json())
        .then(dados => {
            console.log(dados);
            // 这里放需要等待请求完成后执行的代码
            fc_volta();
            history('/')
        })
    } else {
        // 不需要请求的情况直接执行
        fc_volta();
        history('/')
    }
}

内容的提问来源于stack exchange，提问作者João Pedro Oliveira