Javascript 笔记一：Fetch

最新推荐文章于 2024-12-11 15:53:41 发布

停止更新+1

最新推荐文章于 2024-12-11 15:53:41 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

文章标签： javascript api fetch

本文链接：https://blog.youkuaiyun.com/anyicheng2015/article/details/77196457

javascript 专栏收录该内容

11 篇文章

订阅专栏

Fetch API

参考： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

最简单的使用方法：

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

这是最简单的使用方法，fetch只需要带一个参数，就是你想要访问的url地址，这里是’flowers.jpg’。看到then这个关键字，就知道fetch返回的是一个promise。如果一切正常，在then里面可以获得它的response，然后就可以对它做一系列的操作。

带参数的使用方法：

var myHeaders = new Headers();

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

fetch('flowers.jpg', myInit).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

fetch 可以接受第二个参数用来进行初始化，细节可以参考它的文档。从这个例子里面，可以看到http方法和headers可以通过第二个参数来设置。

fetch 是否成功：

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});