Как fetch запрашивает распространенные форматы данных

GitHub Promise Ajax

Fetch

предисловие

В эпоху традиционного Ajax сетевые запросы, такие как API, выполняются через XMLHttpRequest или инкапсулированную структуру, однако конфигурация и методы вызова очень запутаны, что не очень удобно для новичков. Fetch, который мы представляем сегодня, представляет собой лучшую альтернативу, которая не только обеспечивает простой и логичный способ асинхронного извлечения ресурсов по сети, но и может легко использоваться другими технологиями, такими как Service Workers.

本文框架图

2. По сравнению с Аяксом

Использование Ajax для запроса данных JSON обычно выглядит так:

var xhr = new XMLHttpRequest();
xhr.open('GET', url/file,true);
xhr.onreadystatechange = function() {
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();

Мы снова используем fetch для запроса данных JSON:

fetch(url).then(response => response.json())//解析为可读数据
  .then(data => console.log(data))//执行结果是 resolve就调用then方法
  .catch(err => console.log("Oh, error", err))//执行结果是 reject就调用catch方法

При сравнении этих двух код выборки намного проще, а бизнес-логика понятнее, что делает код более легким в обслуживании и более читабельным. В целом, основными преимуществами Fetch являются:

1. Синтаксис лаконичнее, семантичнее, а бизнес-логика понятнее

2. На основе стандартной реализации Promise, поддержка async/await

3. Легко, использоватьisomorphic-fetch

Три обещания Введение

Поскольку Fetch API основан на дизайне Promise, давайте кратко представим рабочий процесс Promise, чтобы вы могли лучше понять Fetch.

Promise工作原理

Метод fetch возвращает объект Promise. В соответствии с характеристиками API-интерфейса Promise, fetch может легко использовать метод then для связывания различных логик обработки. Использование методов Promise.resolve() или Promise.reject() вернет положительный Promise или отрицательное соответственно.Результирующий промис, который вызывает следующий then или catch. Как только в операторе будет ошибка, он также перейдет к улову.

Общий формат данных с четырьмя запросами

Далее мы опишем, как использовать выборку для запроса локальных текстовых данных, запроса локальных данных JSON и запроса сетевых интерфейсов. На самом деле операция намного проще, чем Ajax!

//HTML部分
  <div class="container">
    <h1>Fetch Api sandbox</h1>
    <button id="button1">请求本地文本数据</button>
    <button id="button2">请求本地json数据</button>
    <button id="button3">请求网络接口</button>
    <br><br>
    <div id="output"></div>
  </div>
  <script src="app.js"></script>

1.fetch запросить локальные текстовые данные

Локально есть документ test.txt, и данные в нем можно получить по следующему коду и отобразить на странице.

document.getElementById('button1').addEventListener('click',getText);
function getText(){
  fetch("test.txt")
      .then((res) => res.text())//注意：此处是res.text()
      .then(data => {
        console.log(data);
        document.getElementById('output').innerHTML = data;
      })
      .catch(err => console.log(err));
}

2.fetch запросить локальные данные JSON

Локально хранятся данные posts.json. В отличие от запроса локального текста, его необходимо пройти с помощью forEach после получения данных и, наконец, отобразить на странице.

document.getElementById('button2').addEventListener('click',getJson);
function getJson(){
  fetch("posts.json")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
        let output = '';
        data.forEach((post) => {
          output += `<li>${post.title}</li>`;
        })
        document.getElementById('output').innerHTML = output;
      })
      .catch(err => console.log(err));
}

3. сетевой интерфейс запроса выборки

Получение данных в https://api.github.com/users аналогично способу получения локального JSON, после получения данных их также необходимо обработать

document.getElementById('button3').addEventListener('click',getExternal);
function getExternal(){
  // https://api.github.com/users
  fetch("https://api.github.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
        let output = '';
        data.forEach((user) => {
          output += `<li>${user.login}</li>`;
        })
        document.getElementById('output').innerHTML = output;
      })
      .catch(err => console.log(err));
}
Категории