使用 fetch 方法读取 RapidAPI JSON 响应

Question

我正在开发一个用于学习目的的 react-native 项目。我正在使用 RapidAPI（https://rapidapi.com/divad12/api/numbers-1/endpoints）。

当我点击 API 时，我的状态为 200OK，但我无法从 API 读取 JSON 格式的响应数据。

代码：

fetchCurrencyData = () => {

    fetch("https://numbersapi.p.rapidapi.com/7/21/date?fragment=true&json=true", {

        "method": "GET",

        "headers": {

            "x-rapidapi-host": "numbersapi.p.rapidapi.com",

            "x-rapidapi-key": "<Valid API Key, generated in code snippet>"

        }

    })

    .then(response => {         

        console.log(response);

    })

    .catch(err => {

        console.log(err);

    }); 

}

componentDidMount(){

    this.fetchCurrencyData();

}

在 console.log(response); 我得到：

我检查了 RapidAPI -> MyApps 部分中的响应：

如何读取 JSON 格式的响应正文？

Answer 1

当前您正在打印响应对象，其中包含原始响应，包括标题等。您可以执行以下操作：fetchCurrencyData = () => {&nbsp; &nbsp; fetch("https://numbersapi.p.rapidapi.com/7/21/date?fragment=true&json=true", {&nbsp; &nbsp; &nbsp; &nbsp; "method": "GET",&nbsp; &nbsp; &nbsp; &nbsp; "headers": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "x-rapidapi-host": "numbersapi.p.rapidapi.com",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "x-rapidapi-key": "<Valid API Key, generated in code snippet>"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; .then(response => response.json()) // Getting the actual response data&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; })&nbsp; &nbsp; .catch(err => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; });&nbsp;}componentDidMount(){&nbsp; &nbsp; this.fetchCurrencyData();}

Answer 2

我遇到过同样的问题。从 RapidApi 嵌入勺子 API 时。然后我用了这个：&nbsp; &nbsp; <?php&nbsp; &nbsp; $headers = array('Accept' => 'application/json');&nbsp; &nbsp; $response = Unirest\Request::get("https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/search?number=50&query='.$plus_separated.'",&nbsp; &nbsp; &nbsp; array(&nbsp; &nbsp; &nbsp; &nbsp; "X-RapidAPI-Key" => "bc038c4c88mshae2640d....e1acp1301aejsnd5703df78862"&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; $array_1 = $response->raw_body;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; ?>&nbsp; &nbsp; <div id="result_body" class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<P id="allert_msg" class="text-center">Results Not Found</P>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var array_2 = '<?php echo&nbsp; $array_1;?>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var array_3 = JSON.parse(array_2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var main_array = array_3.results;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var main_array_length = main_array.length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var i=j=k=l=m=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i=0; i < main_array_length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var result_body= document.getElementById("result_body");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var body_link = document.createElement("a");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body_link.setAttribute("class", "single_link");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body_link.setAttribute("target", "_blank");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body_link.setAttribute("href", 'recipe_details.php?id='+main_array[i].id+'&submit_id=OK');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result_body.appendChild(body_link);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var p = document.createElement("div");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.setAttribute("id", "single_item_"+j++);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.setAttribute("class", "single_item");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body_link.appendChild(p);&nbsp; &nbsp; </script>这是用于食谱搜索目的。代码会自动创建 div、a、p、...等 HTML DOM 元素并显示搜索结果。您应该以 json 格式将正确的值放入正确的位置，该位置来自响应。在上面，我将响应放在 PHP 中的“$array_1”中，然后放在 Javascript 中的“array_2”中。然后用 Javascript 继续下一个过程。如果您在我的代码中有一些错误，并且有更好的主意，请让我知道。谢谢！