Question

以下情形之间有什么区别？

方案1-在axios请求中异步等待-不起作用

export const getAll = async () => {
    const retrievedData = await axios.get('http://localhost:3001/anecdotes'); // should return - Array
    return retrievedData.data;
};


const test = () => {
        let anecdotes = getAll();
        // do something 
    };

方案2-辅助方法中的异步等待不起作用

export const getAll = () => {
    const retrievedData = axios.get('http://localhost:3001/anecdotes'); // should return - Array
    return retrievedData.data;
};


const test = async () => {
        let anecdotes = await getAll();
        // do something 
    };

方案3-两个工作区均异步等待

export const getAll = async() => {
    const retrievedData = await axios.get('http://localhost:3001/anecdotes'); // should return - Array
    return retrievedData.data;
};


const test = async () => {
        let anecdotes = await getAll();
        // do something 
    };

以上方案之间有什么区别？ 为什么只有第三种情况有效？

Answer 1

为什么只有第三种情况有效？

所有async函数均会返回承诺-始终。当您在return函数中使用async函数的值时，该值将成为async函数返回的promise的可解析值。

此外，axios()返回一个promise，因此您还需要在其返回值上使用.then()或await来从axios()调用中获取结果。< / p>

场景1

在场景1中，您的getAll()函数为async，并返回一个promise。然后，您的test()函数不会在该承诺上使用await或.then()：

const test = () => {
        let anecdotes = getAll();
        // do something 
};

因此，anecdotes只是一个承诺，您实际上并没有从承诺中获得价值。您需要在该承诺上使用await或.then()来获取价值。

场景2

方案2的问题稍有不同。在getAll()中，您可以这样做：

export const getAll = () => {
    const retrievedData = axios.get('http://localhost:3001/anecdotes');
    return retrievedData.data;
}

axios.get()返回一个承诺。因此，retrievedData是一个承诺。这不是您想要的结果。 return retrievedData.data时，您只是返回了承诺的不存在的属性，因此它将始终返回undefined。

场景3

在方案3中，您确实在await函数的结果和async调用的结果上成功使用了axios()，因此它可以正常工作。

export const getAll = async() => {
    const retrievedData = await axios.get('http://localhost:3001/anecdotes'); // should return - Array
    return retrievedData.data;
};


const test = async () => {
    let anecdotes = await getAll();
    // do something 
};

不同的异步等待方案之间的区别

1 个答案: