Как правильно получать данные в fetch?

Question

[pixal]

Всем привет. Сделал FETCH на JavaScript. Все работает, но как получить данные кроме как вывести в консоль не пойму. Пример:

function sendRequest(method, url, body = null){
    const headers = {
        'Content-Type': 'application/json'
    }
    return fetch(url, {
        method: method,
        mode: 'cors',
        headers: headers
    } ).then(response =>{
        return response.json()
    })
}



sendRequest('GET', requestURL)
.then(data => console.log(data))
.catch(err => console.log(err))

Как мне получить просто объект в переменной?

Comments

[Lynn «Кофеман»]

https://learn.javascript.ru/async-await

[Сергей delphinpro]

Меняйте мышление.
Javascript асинхронный, здесь всё строится на коллбеках и промисах.
Даже await не работает на верхнем уровне и может использоваться только внутри асинхронной функции.

Answer 1

[Алексей Ярков]

Ну так он вам в then приходит. Делайте с ним что надо.

Comments

[pixal]

Иожно ли присовить ппременной, которая будет работать вне .then? Просто не могу понять как его получить
Типа

data.id
data.name и так далее?

[Василий Банников]

pixal, только если используешь await. Больше никак

[ForSureN1]

pixal, Можно ведь создать переменную вне запроса, и в then присвоить ей ответ от respons

[WbICHA]

ForSureN1, ты же шутишь, правда? Правда???

[ForSureN1]

WbICHA, Нет, ну автор ведь спросил, можно ли так сделать

[Сергей delphinpro]

ForSureN1, нельзя так сделать.

[Алексей Ярков]

Сергей delphinpro, да почему? Присвоить можно, а вот использовать будет сложнее ))

[Сергей delphinpro]

Алексей Ярков, ну да. Синтаксически не запрещено, только практической пользы ноль. )

[ForSureN1]

Сергей delphinpro, Можете пожалуйста объяснить, в чем будет сложность использовать такой способ?

let answerServer = '';
let gradeForm = document.querySelector('.paper__info-grade');
const sendData = async(url, data) => {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8',
                    'X-CSRF-Token': token,
                },
                body: JSON.stringify(data),
            })
            if (!response.ok) {
                throw new Error('Error!')
            }
            answerServer = await response.json();
            gradeForm.innerHTML = answerServer.status_text;
};

function sendRating(id, stars) {
    const data = {
        blog_id: id,
        voting_rating: stars,
     }
     sendData('/blogs_voting', data);
}

Здесь вопрос именно в том, почему мы не можем в переменную answerServer записать ответ от запроса ?

[Сергей delphinpro]

ForSureN1, В вашем коде не имеет смысла объявлять переменную во внешнем скоупе. Используете-то вы ее все равно только внутри.

Вот так есть какой-то смысл (на первый взгляд), но сделать уже не выйдет

let answerServer = '';
let gradeForm = document.querySelector('.paper__info-grade');
const sendData = async(url, data) => {
    // ...
    answerServer = await response.json();
};

function sendRating(id, stars) {
     // ...
     sendData('/blogs_voting', data);
     gradeForm.innerHTML = answerServer.status_text;
}

Answer 2

[Dmitriy Grape]

Пожалуйста, забудьте про .then(), вместо него используйте async/await везде, где это возможно.

async function sendRequest(...) { return await fetch(...) }

Comments

[Александр]

И try/catch не забудьте вписать, а то картина не полная.
P.S. - код в примере абсолютно бесполезен и является по сути оверхедом.

[Dmitriy Grape]

Александр, ну, автор так хочет, зачем-то