Как вернуть json из fetch конструкции?

Question

[KambulovDanil]

Всем привет, подскажите, как можно вернуть json из конструкции fetch. Чтобы в любом месте вызвать ее и работать с json файлом.

function translate(){
fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет', {
  method: 'get',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  //body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res=>res.json())
  .then(res => console.log(res));
}
console.log(translate())

Выдает ошибку. Не могу получить json из этой функции

Comments

[Alex]

Выдает ошибку.

А какую!?

[Ярослав Иванов]

Alex, красную

[Alex]

Ярослав Иванов, Ох, если это так, то случай очень сложный. Тут без фломастера не пофиксить.

[Владимир]

А зачем спрашивать одно и то же по несколько раз?

[KambulovDanil]

Alex,

Access to fetch at 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82' from origin 'https://stackoverflow.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM52:2 GET https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82 net::ERR_FAILED
translate @ VM52:2
(anonymous) @ VM52:12
fetch-post-json-data:1 Uncaught (in promise) TypeError: Failed to fetch

[KambulovDanil]

Владимир, Потому что это два разных вопроса. Внимательнее смотри, а потом пиши

Answer 1

[Alex]

Ваш код верный. Запрос не работает по причине, описанной в ошибке, которую вы получаете.
Детали: гуглите "fetch has been blocked by cors policy"

Comments

[KambulovDanil]

function translate(){
fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет', {
  method: 'get',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
},
 mode : 'no-cors' 
  //body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res=>res.json())
  .then(res => console.log(res));
}
console.log(translate())

Ошибка решилась. Но появилась такая

VM142:10 Uncaught (in promise) SyntaxError: Unexpected end of input
    at <anonymous>:10:18

Answer 2

[valentinmamontov]

Если ошибка с CORS и проект на localhost, то попробуй следующее:
1) Через firefox работать над проектом, он к cors политике как то слабей относится, чем хром.
2) установить расширение cors everywhere, активировать плагин на странице проекта и перезагрузить страницу с проектом.
3) через прокси пропускать свой запрос:
Пример на React делал (на метод ЖЗ не обращай внимание)

componentDidMount() {
    const proxyurl = "https://cors-anywhere.herokuapp.com/"; //Прокси как ты понял
    const url = "https://jsonplaceholder.typicode.com/users"; // твой сайт который не отправляет CORS
    fetch(proxyurl + url) 
      .then(response => response.json())
      .then(users => { this.setState({ state: users }) })
      .catch(() => console.log("Can’t access " + url + " ERROR!!!"))
  }

Answer 3

[Pro_Code]

fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет', {
  method: 'POST',
}).then(res=>res.json())
  .then(function(res){
      console.log(res);
      console.log(res['sentences']);
      //делаем что-то с данными.....
  });

Comments

[KambulovDanil]

выводит undefined

[Pro_Code]

KambulovDanil, поправил

[KambulovDanil]

Pro_Code, работает, но вопрос заключался в другом. Как я могу к этому Json обратиться вне функции fetch. например, я хочу использовать полученный Json в другом методе

[Андрей Новиков]

KambulovDanil, Можно так

let getData = fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет', {
    method: 'POST',
}).then(res => res.json());

async function anyFunk() {
    let mess;
    await getData.then(res => mess = res);
    console.log(mess);
}

[Pro_Code]

KambulovDanil,

function translate(){
    fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет', {
      method: 'POST',
  }).then(res=>res.json())
      .then(function(res){
          handler(res);
      });
}

translate();

function handler(data) {
    console.log(data['sentences'][0]['trans']);
}

Вот так, например......

Answer 4

[zkrvndm]

Примерно вот так:

async function translate() {
	var response = await fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=en&hl=ru&dt=t&dt=bd&dj=1&source=icon&tk=467103.467103&q=привет');
	var obj = await response.json();
	return obj;
}

console.log(await translate());

Вместо промисов всегда лучше использовать async / await, так как с ними код короче на порядок.
И да, у меня ни одной ошибки, все работает.

Comments

[Tim]

как нет ошибки если ты используешь await вне асинхронной функции?

[zkrvndm]

Tim, в консоли МОЖНО использовать await вне асинхронной функций. Вот если в коде вызывать, то да, надо делать функцию, где вызываешь, асинхронный ну или работать с промисом.