理解Fetch()Javascript

时间:2016-06-29 23:34:45

标签: javascript promise fetch-api

我正在阅读一个javascript教程,我需要一些帮助来理解以下函数中的模式:

get:  function(url) {
         return fetch(rootUrl + url, {
            headers: {
                'Authorization': 'Client-ID ' + apiKey
            }
        } )
        .then(
            function(response) {
                return response.json();
            }
        );
    }

我感到困惑的是,如果我们只关心response.json(),那么返回fetch()的重点是什么?

2 个答案:

答案 0 :(得分:2)

return fetch能够将.then().catch().get()电话联系起来,例如

obj.get(url).then(function(data) {
  console.log(data)
})
如果对象没有名为return的属性,则

没有obj.get(url).then(handler)语句then可能会记录错误,其中value是处理从Promise返回的fetch的函数,其中没有从get函数返回值



var objWithReturn = {
  get: function(url) {
    return Promise.resolve(url)
      .then(
        function(response) {
          return JSON.parse(response);
        }
      );
  }
}

objWithReturn.get('{"a":1}')
  .then(function(data) {
    console.log(data)
  })






var objWithoutReturn = {
  get: function(url) {
    Promise.resolve(url)
      .then(
        function(response) {
          return JSON.parse(response);
        }
      );
  }
}

objWithoutReturn.get('{"a":1}')
  .then(function(data) {
    console.log(data)
  })




答案 1 :(得分:1)

它没有返回fetch()。当您编写链式函数调用时:

return f1(args).f2(otherargs);

它相当于:

var temp1 = f1(args);
var temp2 = temp1.f2(otherargs);
return temp2;

所以你的功能可以写成:

get: function(url) {
    var promise1 = fetch(rootUrl + url, {
        headers: {
            'Authorization': 'Client-ID ' + apiKey
        }
    });
    var promise2 = promise1.then(function(response) {
        return response.json();
    });
    return promise2;
}

现在您可以看到它返回了一个承诺,当它被填满时,会从响应中返回JSON。