Блог

Главная - Вопросы по программированию - Как передать необязательные параметры с помощью fetch vanilla JS

Как передать необязательные параметры с помощью fetch vanilla JS

#javascript

#javascript

Вопрос:

Я использую fetch метод JavaScript GET для вызова API. API возвращает данные; однако есть необязательные параметры, которые я хотел бы передать, чтобы отформатировать ответ данных другим способом. Как передать необязательные параметры с помощью fetch метода?

 async function getText(){
    
    let passageParam = randomPassage();

    //API credit
    let Url = 'https://api.esv.org/v3/passage/text?q='   passageParam   params;
    console.log(Url);
    //Await - Used with Async
    //Suspend function exeeuction until the Async promise settles and returns its result
    let response = await fetch(Url, {
        method: 'GET',
        headers: {
            'Authorization': 'myToken'
         },
        params = {
            'indent-poetry': False,
            'include-headings': False,
            'include-footnotes': False,
            'include-verse-numbers': False,
            'include-short-copyright': False,
            'include-passage-references': False
        }
    });

    if(response.ok){ // if HTTP-status is 200-299
        // get the response body
        let passage = await response.json();
        
        populateUI(passageParam, passage.passages[0]);
        //console.log(passage);
     } else{
        alert("HTTP-Error: "   response.status);
     }

     //Function to input json response to HTML
     function populateUI(ref, verse){
        //strip verse
        document.getElementById('reference').innerHTML = ref;
        document.getElementById('verse').innerHTML = verse;
    }

}

Комментарии:

1. Когда вы получаете данные из API, в конечном итоге это в основном массив объектов. Что вы имеете в виду, когда говорите, что хотите отформатировать его, дорогой :)? Пожалуйста, уточните, друг?

2. Не существует такой вещи, как params передача fetch . Здесь перечислены разрешенные аргументы. Если это запрос get, вам нужно просто добавить их в URL-адрес в виде строки запроса. Может быть полезно использовать URLSearchParams — fetch(`${url}?${new URLSearchParams({key:'value'}).toString()}`)

3. @Adam: Абсолютно правильно.

Ответ №1:

При использовании fetch with GET обычно ожидается, что параметры будут отправлены через строку запроса.

Вы можете попробовать что-то вроде этого:

 let passageParam = randomPassage();
let extraParams = 'amp;indent-poetry=Falseamp;include-headings=False'  
    'amp;include-footnotes=Falseamp;include-verse-numbers=False'   
    'amp;include-short-copyright=Falseamp;include-passage-references=False';
let Url = 'https://api.esv.org/v3/passage/text?q='   passageParam   extraParams;
console.log(Url);

В качестве альтернативы вы можете сделать что-то вроде этого:

 let passageParam = randomPassage();
let extraParams = {
    'indent-poetry': 'False',
    'include-headings': 'False',
    'include-footnotes': 'False',
    'include-verse-numbers': 'False',
    'include-short-copyright': 'False',
    'include-passage-references': 'False'
}
let Url = 'https://api.esv.org/v3/passage/text?q='   passageParam   
    'amp;'   (new URLSearchParams(extraParams)).toString();
console.log(Url);

А также удалите params выражение.

Ответ №2:

Поскольку вы отправляете запрос GET на конечную точку URL с помощью fetch. URL-EndPint всегда будет возвращать один и тот же формат данных каждый раз, когда вы его вызываете.

И форматирование ответа в данном случае не в наших руках. Чтобы проверить все детали ответа, перейдите на вкладку network консоли разработчика (выполните Ctrl Shift I), вы можете просмотреть заголовки ответов и другие связанные с ними материалы, которые вы получили в ответе, и посмотреть, может ли какая-либо информация быть полезной для вас там.

Метки: