如何使用 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），您可以看到响应中收到的响应标头和其他相关内容，看看是否有任何信息对您有用那里本身。