New Fetch API &
response.json();
&response.blob();
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json
fetch(`https://cdn.xgqfrms.xyz/json/badges.json`)
.then((res) => res.json())
.then((data) => console.log(data));
fetch(`https://cdn.xgqfrms.xyz/json/badges.json`)
.then((res) => res.json())
.then((data) => {
console.log(data.user);
console.log(data.courses);
console.log(data.badges);
});
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json
fetch(`https://api.github.com/users/xgqfrms/repos`, {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(function(response) {
return response.json();
// json() ???
})
.then(function(json) {
console.log('parsed json: ', json);
console.log('parsed json: ', json[0]);
console.log('parsed json: ', json[1].name);
})
.catch(function(error) {
console.log('parsing failed: ', error);
});
https://gist.github.com/xgqfrms-GitHub/2e9c64cdd8e8522cb1d3261d2105b3cb
https://gist.github.com/xgqfrms-GitHub/b44ba9049575654e36e3032c58576931
https://gist.github.com/xgqfrms-GitHub/4afa7b8af41c5060eedd926682627f74
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/blob
let myImage = document.querySelector('img');
fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/blob
let myHeaders = new Headers(),
myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
fetch('flowers.jpg',myInit)
.then((response) => response.blob())
.then((myBlob) => {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
fetch(`https://cdn.xgqfrms.xyz/logo/icon.png`)
.then((response) => {
if(response.ok) {
((response) => response.blob())
.then((myBlob) => {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
}else {
console.log('Network response was not ok.');
}
})
.catch((error) => {
let emsg = `
There has been a problem with your fetch operation: \n
${error.message}!
`;
console.log(`emsg = `, emsg);
console.log(`emsg = \n`, this.fetch);
console.log(`emsg = \t`, this.location.href);
});
let myHeaders = new Headers();
let myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest)
.then((response) => response.blob())
.then((myBlob) => {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Body 类定义了以下方法 (这些方法都被 Request 和 Response所实现)以获取body内容.
这些方法都会返回一个被解析后的promise对象和数据.
arrayBuffer()
blob()
json()
text()
formData()
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/ok
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/status
Response 接口的status 只读属性包含响应的状态代码(例如,成功为200)。
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/statusText
Response 接口的 statusText只读属性包含与状态代码相对应的状态消息(例如,对于200可以确定)。
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/Response
Response() 构造函数创建了一个新的 Response 对象.
Fetch & JSON & Body.json()
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json
Body mixin 的 json() 方法使用一个 Response 流,并将其读取完成。 它返回一个 promise ,解析结果是将文本体解析为 JSON。
https://developer.mozilla.org/zh-CN/docs/Web/API/Body/blob
Body mixin的 blob() 方法使用一个 Response 流,并将其读取完成。 它返回一个使用一个 Blob解决{的promise。
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/Body
Fetch API 中的 Body mixin 代表 代表响应/请求的正文,允许你声明其内容类型是什么以及应该如何处理。
正文由Request 和Response实现 --- 这为这些对象提供了一个相关联的主体(字节流), 一个已使用的标志(最初未设置) 和一个MIME类型(最初为空字节序列)
https://jakearchibald.com/2015/thats-so-fetch/
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
https://github.github.io/fetch/
https://stackoverflow.com/questions/29775797/fetch-post-json-data
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#参见
JSON.parse(res)
&res.json()