Ajax and APIs

Asynchronous Javascript And XML

6

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.

You might also like More from author

Leave A Reply

Your email address will not be published.