Использование fetch вместо ajax jQuery для вызова API GET

Question

Недавно я обнаружил, что я конвертирую функцию, которая вызывает удаленный API, от возврата обратного вызова до возврата Promise. Я думал, что это отличная возможность также заменить вызов $.ajax вызовом fetch, так как fetch уже возвращает Promise.

Однако этот конкретный вызов является GET, который фактически ожидает полезную нагрузку (содержащую ключ и тип возврата). В частности, я называю это с помощью:

$.ajax({ 
    type: 'GET', 
    contentType: 'application/json; charset=utf-8', 
    url: config.serviceUrl, 
    data: { 
     apiKey: key, 
     format: 'json' 
    } 
}) 
.done(data => {...}) 
.fail((jqXHR, textStatus, errorThrown) => {...}); 

Однако fetch не имеет data свойство, и выдает сообщение об ошибке, если вы пытаетесь отправить body с GET запроса (TypeError: Failed to execute 'fetch': Request with GET/HEAD method cannot have body). И согласно Chromium forums, это ожидаемое поведение.

Имейте в виду: у меня нет абсолютно никакого контроля над внешним API, поэтому упоминание о том, что отправка полезной нагрузки с GET нарушает какой-либо протокол API или предлагает изменить основной вызов, не помогает.

В этом случае можно использовать fetch? Как?

Answer 1

ajax функция JQuery просто добавляет data к URL, как URL параметры для GET запросов:

данные

данные для отправки на сервер. Он преобразуется в строку запроса, если не является уже строкой. Он добавляется к URL-адресу для запросов GET.

Source

---

Использование выборки, вы можете сделать это вручную, или вы можете использовать подход, аналогичный тому, что:

var url = new URL("http://youapi.com") 
var data = { 
    apiKey: key, 
    format: 'json' 
} 

Object.keys(data).forEach(key => url.searchParams.append(key, data[key])) 
fetch(url) 

Answer 2

var headers = new Headers(); 
    headers.append("Content-Type", "application/json; charset=utf-8"); 
    fetch(config.serviceUrl + "?apiKey=" + key + "&format=json", 
    {headers:headers, method:"GET"} 
    ).then(response => response.json()) 
    .then(json => /* do stuff with `json` */) 
    .catch(err => console.error(err)); 

соответствует текущему $.ajax().