JS Fetch API访问返回值

时间:2018-05-18 19:21:16

标签: javascript fetch

这是我从fetch调用中访问结果的方式:

let data;

fetch(someUri)
    .then((response) => response.json())
    .then(_data => {
        data = _data;
    })
    .catch(error => {
        console.error(error);
    });

是否也可以从fetch函数本身访问结果,如下所示:

let data = fetch(someUri)
    .then((response) => response.json())
    .then(data => {
        // do some stuff
        return data;
    })
    .catch(error => {
        return error;
    });

因此data将是JSON数据或错误。我在Chrome控制台中看到结果在变量中,但我不知道如何访问它,因为它包含了其他信息。

3 个答案:

答案 0 :(得分:2)

您可以将其包装在一个立即调用的异步函数中并使用await:

https://jsfiddle.net/ibowankenobi/ok72rfp6/

!async function(){
let data = await fetch("https://raw.githubusercontent.com/IbrahimTanyalcin/LEXICON/master/lexiconLogo.png")
    .then((response) => response.blob())
    .then(data => {
        return data;
    })
    .catch(error => {
        console.error(error);
    });

console.log(data);
}();

答案 1 :(得分:1)

fetch方法返回一个解析为Response对象的promise。

获得回复后,由您决定如何应对。您可以使用响应体上的方法(如json,text或blob)将数据转换为所需的格式以供使用。

答案 2 :(得分:0)

这里有一些很好的资源来获取和一个例子。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://developer.mozilla.org/en-US/docs/Web/API/Body/text https://developer.mozilla.org/en-US/docs/Web/API/Body/json

您可能还想熟悉承诺。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise



 
    function doSomethingWithText(text) {
        console.log('The text is:', text);
    }

    fetch('someUrl.html')
      .then(data => data.text())
      .then(text => (doSomethingWithText(text))
      .catch(error => new Error(error));