如何使用 fetch vanilla JS 传递可选参数

Question

我正在使用 JavaScript fetchGET 方法来调用 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;    }}

Answer 1

使用fetchwith时，通常期望通过查询字符串GET发送参数。

你可以尝试这样的事情：

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 + 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 + 

    '&' + (new URLSearchParams(extraParams)).toString();

console.log(Url);

并删除params表达式。

Answer 2

由于您正在使用fetch向URL-EndPoint发出GET请求。每次调用 URL-EndPint 都会返回相同的数据格式。

在这种情况下，格式化响应不在我们手中。要检查所有响应详细信息，请转到 Developer Console的网络选项卡（执行Ctrl+Shift+I），您可以看到响应中收到的响应标头和其他相关内容，看看是否有任何信息对您有用那里本身。