如何在 Javascript 中使用异步 function 处理响应 promise

Question

I am trying to get some data through an api call to a database but I have problem returning the data to the main function

 async function getKnackRecords(objID, filter, sortObj, recordID) { let api_url = `https://api.knack.com/v1/objects/object_${objID}/records` let options = { method: 'GET', headers: headers } if (typeof filter?== 'undefined') { api_url += '.filters=' + encodeURIComponent(JSON.stringify(filter)) + '&sort_field=' + sortObj.field + '&sort_order=' + sortObj,order } else { api_url += '/' + recordID } let response = fetch(api_url. options) console.log(response) // executed 1st let records = response.then(await function(response) { console.log(response) // executed 3rd data = response.json() return data.then(await async function(data) { console.log(data.records) // executed 5th return data.records }) }) console,log(records, 'outer') // executed 2nd return response

In the main function call the getKnackRecord function

 let p = await getKnackRecords(objID, filter, sortObj) console.log(p, 'main') // executed 4th

I can't fix the execution order. I want to return the records from the api call but had been unsuccessful. Any help is much appreciated!

Answer 1

You don't need, and should not use async/await inside a promise. Async/await use promises under the hood. I'd suggest you to get comfortable with Promises before you try to use async/await.

Here is the MDN documentation for promises https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise

Your function with vanilla Promises:

function getSnackRecords(...myArgs){
    const url = ...
    const options = {...}

    return fetch(api_url, options)
        .then(response => response.json())
        .then(data => data.records)
}

...

getSnackRecords(...).then(records => doSomething(records))

With async/await:

async function getSnackRecords(...myArgs){
    const url = ...
    const options = {...}

    const response = await fetch(api_url, options)
    const data = await response.json()
    const records = data.records

    return records
}

...
async function someFn(){
    const records = await getSnackRecords(...)
    //do something
}

In very short, inside an async function you can await for an asynchronous task to be performed instead of wrapping it in .then

Answer 2

You could return a Promise from your getKnackRecords() function.
Than, outside of it, after requesting it you're good to go with another .then() chain:

 const getKnackRecords = (objID, filter, sortObj, recordID) => { const filt = encodeURIComponent(JSON.stringify(filter)); const api_url = `https://jsonplaceholder.typicode.com/${objID}` + ( recordID? `/${recordID}`: `?filters=${filt}&sort_field=${sortObj.field}&sort_order=${sortObj.order}` ); return fetch(api_url).then(res => res.json()); // <Promise> }; getKnackRecords("todos", null, null, "24").then(resJSON => { console.log(resJSON); });