Svelte / Vanilla JS - 我是否需要在等待异步 function 时使用.then()？

Question

This is probably best explained with code:

in my utils file I have created the following async function:

export async function post(fetch, url, body) {
    const res = await fetch(url, {
        method: 'POST',
        body,
        headers
    });
    return await res.json();
}

I've stripped down the function to avoid posting too much code.

Now in my.svelte component file, the function above is called as followed:

async function handleLogin() {
    const result = await post(fetch, 'https://accountingserver.dev/auth/login', {
        email: email,
        password: password
    });
    console.log(result);
}

In the above example, the result is output correctly as expected. But I have found I can also do the following and get the same outcome:

async function handleLogin() {
    post(fetch, 'https://accountingserver.dev/auth/login', {
        email: email,
        password: password
    }).then((result) => {
        console.log(result);
    });
}

So my question, is any of the two methods more valid and if so.. why?

Answer 1

It's a preference thing, but where possible you should lean towards using async/await . It makes your code cleaner and easier to read and also helps you avoid Promise Hell .

You should note that some environments might not support async/await as it is a newer feature, but most modern environments will likely natively support it. In cases where async/await is not supported, async function name(){} syntax will not be allowed and you will need to use .then() instead of await .