Меню

Ajax and APIs

08.05.2018 - java script, ЯП
Ajax and APIs

Ajax and APIs

Asynchronous Javascript And XML

Aplication Programming Interface

AJAX


Fetch

Часто, при попытке сделать запрос по ajax на другой домен мы будем сталкиваться с ошибкой No 'Access-Control-Allow-Origin' header is present on the requested resource.
Но есть такая штуковина под названием Cross Origin Resource Sharing или CORS.
В двух словах как он работает: разработчикам API с которого мы хотим получать информацию, нужно сделать CORS на их сервере. И если такой технологии разрабы не внедрили, то можно обойти это: нужно спроксировать или сделать запрос через их собственный сервер. Это как делать запрос на наш собственный сервер, где same origin policy не существует и затем послать данные в браузер.

Самый простой способ, использовать proxy под названием crossorigin.me или proxy или proxy2

fetch('https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/2487956/')
.then(result => {
  console.log(result);
})
.catch(error => {
  console.error(`Ошибка: ${error}`);
})

Принятые данные имеют «формат» ReadableStream. И чтобы получить javascript объект из пришедшего JSON — воспользуемся методом JSON на этом результате. Этот метод также возвращает promise, поэтому нужно будет воспользоваться конструкцией then еще раз

fetch('https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/2487956/')
.then(result => {
  console.log(result);
  return result.json(); //Вернет промис
})
.then(data => {
  console.log(data);
});
.catch(error => {
  console.error(`Ошибка: ${error}`);
})

Fetch + Async/Await

async function getWeatherAW(woeid) {
  try{
  const result = await fetch(
    `https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/${woeid}/`
  );
  const data = await result.json();
  console.log(data);
  const tomorrow = data.consolidated_weather[1];
  console.log(
    `Температура завтра ${data.title} остается между ${tomorrow.min_temp} и ${
      tomorrow.max_temp
    }`
  );
  return data;
} catch (e) {
  console.error(`Ошибка: ${e.message}`);
}
}

getWeatherAW(2487956);
let dataLondon;
getWeatherAW(44418).then(data => {
  dataLondon = data;
  console.log(dataLondon);
});

Здесь мы задаем всё в асинхронную функцию, в которой все асинхронные операции используются с ключевым словом await.
Также обратите внимание, что если мы возвращаем из такой функции результат с помощью return, то функция возвращает resolve, который мы потом можем получить с помощью then.

Метки: , , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *