Передача массива объектов, возвращенных командой fetch, обратно в вызывающую функцию (Django и JS)

Я потратил на это несколько дней, пробуя различные методы, которые я нашел здесь и на других форумах, но просто не могу разобраться с этим.

Я пробовал .map(), пробовал глобальные переменные, пробовал все, что только можно придумать. крутая кривая обучения

Я разделил одну длинную функцию на несколько маленьких функций, чтобы сделать код более читаемым и просто более функциональным, приведенный ниже код вызывается главной функцией, которую я использую для отображения, цель кода ниже - получить данные из модели (через views.py) и затем передать их обратно в главную функцию, это будут данные, содержащие имена, города, поселки, страны, это работало нормально, пока я не разделил длинную функцию, но теперь не хочет передавать переменные.

Там, где я console.log 'the objects the towns', это выглядит нормально в консоли, но как только я выхожу за пределы этого fetch Im lost, я пытался вернуть данные изнутри функции fetch mappointobject (которая, как я полагаю, является массивом объектов), но она не хочет, я пытался поставить 'await' на final console.log, но ничего, кажется, независимо от того, что я пытался не удается после закрытия скобок функции fetch }), основная функция просто говорит мне 'undefined'

Ниже приведено то, что я получаю в console.log прямо перед закрывающими скобками fetch

объекты города (8) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]

let mappointsobject;
async function radiocontacttownslist() {

    fetch(`/conlogger/getradiocontactsdata`, {      //this fetch command via views.py gets the data in the radiocontacts list
        method: 'POST',
        credentials : 'same-origin',
        headers: {//'Accept': 'application/json',                                                     //Django needs these headers
            'X-CSRFToken': getCookie("csrftoken"),
            'Content-type': 'application/json' ,                                                   //Indicates that the request body format is JSON.
            'X-Requested-With': 'XMLHttpRequest'
             },
        })
    .then(response => response.json())
                                                                                                   //get the promise and when data comes back, take the response and convert and return as JSON
    .then(result => {
        console.log(result);
        mappointsobject = JSON.parse(result)                 //convert from JSON to javascript object - also see next line
        console.log('the objects the towns',mappointsobject)   //  this is all the objects and all the data from the radio contacts table

    })  //end of fetch brackets

    console.log('townlisttestoutsideoffetch',mappointsobject)
    return mappointsobject;
}

Я пробовал глобальные переменные, я пробовал .map() (полностью потерялся с этим, но попробовал), я пробовал передавать строки и числа обратно, и они передавались обратно в основную функцию нормально, ей не нравится массив или есть временной конфликт. Я также пробовал использовать 'await' в различных точках главной функции и этой функции, но не могу найти этому рационального объяснения.

Ищу руководства, я все еще учусь и мне еще многому предстоит научиться, спасибо

Похоже, что вы хотите вернуть значение, которое получаете из api. Сейчас, когда ваш код написан, вы используете async с функцией без await где-либо в теле.

fetch возвращает Promise, который является асинхронным фрагментом кода. Когда встречается Promise, браузер не ждет окончания его выполнения или разрешения, а просто продолжает работу с остальной частью кода.

Я предполагаю, что townlisttestoutsideoffetch выходит из системы раньше, чем the objects the towns, и это потому, что происходит отстрел fetch, а затем выполнение кода сразу же продолжается и происходит запись в консольный журнал. Затем, когда обещание разрешается, запускается другой консольный журнал.

Вот как можно перестроить код, чтобы он работал так, как ожидалось:

async function radiocontacttownslist() {
    return await fetch(`/conlogger/getradiocontactsdata`, {
        method: 'POST',
        credentials : 'same-origin',
        headers: {//'Accept': 'application/json',                                                     
            'X-CSRFToken': getCookie("csrftoken"),
            'Content-type': 'application/json' ,                                                   
            'X-Requested-With': 'XMLHttpRequest'
        },
     })
    .then(response => JSON.parse(response.json()))
}

let mappointsobject = radiocontacttownslist()

Главное, на что следует обратить внимание, это то, что мы устанавливаем mappointsobject в результат вызова функции radiocontacttownslist, который return является значением.

Обратите внимание, что await находится перед fetch - он будет ждать, пока обещание разрешится, а затем return вернет значение.

Спасибо, Алекс, я пытался возвращать значения вне функции fetch, а также пробовал 'await' на уровне fetch, но никогда не думал, что могу возвращать и ожидать на уровне fetch, Я попробовал это, как вы сказали выше, и функция не упала, но значения не были переданы обратно в вызывающую функцию но я мог получить доступ к данным (массив объектов) из вызывающей функции в глобальной переменной mappointsobject вот что я получил в итоге -

let mappointsobject;
async function radiocontacttownslist() {
    return await fetch(`/conlogger/getradiocontactsdata`, {      //this fetch command via views.py gets the data in the radiocontacts list
        method: 'POST',
        credentials : 'same-origin',
        headers: {//'Accept': 'application/json',                //Django needs these headers
            'X-CSRFToken': getCookie("csrftoken"),
            'Content-type': 'application/json' ,                 //Indicates that the request body format is JSON.
            'X-Requested-With': 'XMLHttpRequest'
             },
        })
    .then(response => response.json())
                                                                //get the promise and when data comes back, take the response and convert and return as JSON
    .then(result => {
        console.log(result);
        mappointsobject = JSON.parse(result)                     //convert from JSON to javascript object - also see next line
        //console.log('the objects the towns',mappointsobject)     //  this is all the objects and all the data from the radio contacts table

    })  //end of fetch .then brackets
}

вызывающая функция выглядит следующим образом

    const mappointsobjectreturned = await radiocontacttownslist();
    console.log('rtrndfromradiocontacttownslist', mappointsobject) //trying to return object from function called above

Я попробовал сделать console.log на mappointsobjectreturned, но он просто сказал undefined, как это было раньше в консоли до того, как я сделал изменения, только когда я обратился к переменной mappointsobject напрямую, которая была заполнена в функции, которая была вызвана, консоль затем дала мне массив объектов, а не undefined.

rtrndfromradiocontacttownslist (8) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]

Так что это работает, но мне не нравится, как я это сделал, можете ли вы увидеть какую-либо причину, по которой это не будет работать только с возвратом и ожиданием на уровне выборки в вызываемой функции? Является ли console.log в вызывающей функции все еще попыткой использовать предварительно возвращенное значение или я неправильно определил переменную, спасибо большое за вашу помощь.

Вернуться на верх