• 概览
• Response 对象的同步属性
• 判断请求是否成功
• Response.headers 属性
• 读取内容的方法

• POST 请求
• 提交 JSON 数据
• 提交表单
• 文件上传
• 直接上传二进制数据

• 错误处理
• 中止
• 带Cookie发送请求

fetch()接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。

既然返回一个promise对象，那么我们可以使用then进行链式调用。

fetch('xxx.xxx')
	.then(response => console.log(response)) //此时返回的是一个response对象,它对应服务器的 HTTP 回应
接着我们调用response的json方法，把response对象转换为JS可操作的json对象
 
fetch('xxx.xxx')
	.then(response => console.log(response.json()))
Response.json()会将响应流数据读成json格式
 
Response.text()会将响应流数据读成text类型
 
此时，response.json()返回的是一个promise对象，我们继续调用then方法。
 
fetch('xxx.xxx')
	.then(response => console.log(response.json()))
	.then(json => console.log(json))
response对象
 
当fetch()方法执行结束时，会返回一个Response对象，我们可以通过Response对象的属性和方法来查看相关响应信息。
 
 
Response.headers 值 对象， 只读 ，包含该Response所关联的Headers对象
 
 
Response.ok 值true ，只读，包含了一个布尔值，表示该Response是否成功（状态码在200-299的为true）
 
 
Response.status 值200 ，只读，该Response状态码，200表示成功。404表示服务器没有该资源。
 
 
Response.statusText 值OK， 只读，表示与status状态码一直的信息，200 对应 OK
 
 
Response.url 值是一个url地址，只读，表示该Response的url
 
 
Response.redirected 只读，表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目。
 
 
Response.type 响应类型，只读，包含 Response 的类型（例如，basic、cors）。
 
 
Response.body 一个简单的 getter，表示 body 内容。
 
 
几个方法：Response实现了Body接口，所以可以使用以下方法：
 
 
Body.json() 读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 JSON 格式的 Promise 对象。
 
 
Body.text()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 USVString 格式（文本格式）的 Promise 对象。
 
 
Body.blob()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 Blob 格式（二进制格式，包含二进制数据信息）的 Promise 对象。
 
 
Body.formData()读取Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 FormData 格式的 Promise 对象。
 
 
Body.arrayBuffer()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 ArrayBuffer 格式的 Promise 对象。
 
 
Response 对象的同步属性
 
response.status和response.statusText就是 Response 的同步属性，可以立即读取。
 
async function fetchText() {
  let response = await fetch('/readme.txt');
  console.log(response.status); 
  console.log(response.statusText);
判断请求是否成功
 
fetch()发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功。
 
这就是说，即使服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为 rejected状态）。
 
只有通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功。
 
async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
Response.headers 属性
 
Response 对象还有一个Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。
 
Headers 对象可以使用for…of循环进行遍历。
 
const response = await fetch(url);
for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
// 或者
for (let [key, value] of response.headers.entries()) { 
  console.log(`${key} : ${value}`);  
Headers.get()：根据指定的键名，返回键值。
Headers.has()： 返回一个布尔值，表示是否包含某个标头。
Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
Headers.append()：添加标头。
Headers.delete()：删除标头。
Headers.keys()：返回一个遍历器，可以依次遍历所有键名。
Headers.values()：返回一个遍历器，可以依次遍历所有键值。
Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。
Headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。
 
读取内容的方法
 
const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = URL.createObjectURL(myBlob);
const myImage = document.querySelector('img');
myImage.src = objectURL;
fetch()的第二个参数：定制 HTTP 请求
 
fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。
 
POST 请求
 
const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  body: 'foo=bar&lorem=ipsum',
});
const json = await response.json();
method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
 headers：一个对象，用来定制 HTTP 请求的标头。
 body：POST 请求的数据体。
 
提交 JSON 数据
 
上面示例中，标头Content-Type要设成’application/json;charset=utf-8’。因为默认发送的是纯文本，Content-Type的默认值是’text/plain;charset=UTF-8’。
 
const user =  { name:  'John', surname:  'Smith'  };
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json;charset=utf-8'
  body: JSON.stringify(user) 
});
上面示例中，标头Content-Type要设成’application/json;charset=utf-8’。因为默认发送的是纯文本，Content-Type的默认值是’text/plain;charset=UTF-8’。
 
const form = document.querySelector('form');
const response = await fetch('/users', {
  method: 'POST',
  body: new FormData(form)
const input = document.querySelector('input[type="file"]');
const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');
fetch('/avatars', {
  method: 'POST',
  body: data
});
直接上传二进制数据
 
fetch()也可以直接上传二进制数据，将 Blob 或 arrayBuffer 数据放在body属性里面。
 
let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});
fetch注意事项
 
fetch只有在网络错误的情况，返回的promise会被reject。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误，所以Promise的状态为resolve。
 
fetch('http://baidu.com')
	.then(response => {
		if(response.ok){
			response.json();
		throw new Error('error!')
	.then(data => console.log(data))
fetch 自身并没有提供 中止请求的方法。但是部分浏览器有实现AbortController，可以通过AbortController中止fetch请求
 
const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 5000);
fetch('/api/user/CaiCai', {
  signal, // 在option中加入signal
  method: 'POST',
  // credentials:'include',
  headers: {
    'Content-Type': 'application/json'
  body: JSON.stringify({
    name: 'CaiCai',
    age: '26',
}).then((res) => {
  return res.json()
}).then((result) => {
  console.log(result)
}).catch((err) => {
  console.log(err)
带Cookie发送请求
 
如果我们想要在异步请求中带上cookie参数，那么需要显式指定credentials参数：
 
credentials可设置为include、same-origin、omit。
 
include为了让浏览器发送包含凭据的请求（即使是跨域源）。
 
如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials: ‘same-origin’。
 
要改为确保浏览器不在请求中包含凭据，请使用credentials: ‘omit’。
 
 
omit: 默认值，忽略cookie的发送
 
 
same-origin: 表示cookie只能同域发送，不能跨域发送
 
 
include: cookie既可以同域发送，也可以跨域发送
 
 
credentials所表达的含义，其实与XHR2中的withCredentials属性类似，表示请求是否携带cookie；
 
 
fetch(url, {
  credentials: 'include'
参考文章：
 
fetch的概念以及基本用法
                    Body.blob()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 Blob 格式（二进制格式，包含二进制数据信息）的 Promise 对象。Body.text()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 USVString 格式（文本格式）的 Promise 对象。
在fetch-rewards文件夹中，运行以下命令以启动：
 $ npm install // only once to install dependencies
$ npm start
默认情况下，该应用程序在上运行。
请求失败时，API将返回错误：
 400：错误的请求
API参考
POST /交易
使用提交的付款人，积分和时间戳创建新交易。
 如果发布成功，则返回事务列表。 如果提交了不正确的交易表格，则此调用将返回错误。
 curl -X POST 'localhost:5000/transaction' -H 'Content-Type: application/json' --data-raw '{ "payer": "DANNON", "points": 300, "timestamp": "2020-10
				
使用fetch API来做后端请求，相比较传统的Ajax方式，在写出的代码上更加容易理解，也更便于别人看懂。但是在使用的过程中，经常有同学不能顺利从传统的Ajax请求（如果使用jquery的话，就是$.ajax,$.post,$.get）转移到新的fetch方式，很多时候就是卡在了获取响应数据的环节上。
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB




    

在 传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法，它不仅提供了一种简单，合乎逻辑的方式来跨网络异步获取资源，而且可以很容易地被其他技术使用，例如 Service Workers。
二 与Ajax对比
使用Ajax请求一个 JSON 数据一般是这样：
var xhr = new XMLHttpRequest();
xhr.open('GET', url/file,true);
xhr.onreadystatecha
				
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。
fetch('/https://xxxx.xxx').then((data)=>{
　　//text()属于feych的API的一部分，返回的是一个Promise实例对象，用于获取后台返回的数据
　　return data.text();
}.then(data => {
　　console.log(data);
fetch请求携带参数
method(String):HTTP请求方法，默认为GET(GET、POST、PUT、DELETE)
关于该项目
我们有一个梦想，那个梦想就是拥有一个您可以在白天或黑夜随时访问的站点，并查看成千上万的狗图片！！！谁不喜欢这个主意！使用我们的顶级图像识别软件，我们可以验证每张照片确实包含狗的图像。
要启动并运行本地副本，请遵循以下简单步骤。
这是一个如何列出使用该软件所需的内容以及如何安装它们的示例。
 npm npm install npm@latest -g
克隆仓库git clone https://github.com/RoodeAwakening/Fetch.git
安装NPM软件包pipenv install
pipenv install python-dotenv
pip install google-cloud-vision
npm install
我们将此应用程序设计为可养宠物的地方。确保您的狗的
				
while ($row = mysql_fetch_assoc($query)) { ?>  ; charset=utf-8" />  	$row['id']?>"> 用户： 		TYPE="text" NAME="user" value="$row['user']?>" />
 标题： 		TYPE="text" NAME="title" value="$row['...
				
Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，可以使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用程序。在本文中，我们将介绍如何使用 Python 和 Flask 结合 Electron 编写一个简单的桌面应用程序。
1. 安装 Electron
首先，我们需要安装 Electron。可以通过 npm 来安装它：
npm install electron --save-dev
2. 创建 Electron 应用程序
接下来，我们需要创建一个基本的 Electron 应用程序。在项目根目录下创建一个名为 main.js 的文件，并添加以下代码：
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
  win.loadFile('index.html')
  win.webContents.openDevTools()
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
这段代码创建了一个基本的窗口，加载了一个名为 index.html 的文件，并打开了开发者工具。
3. 创建 Flask 应用程序
然后，我们需要创建一个 Flask 应用程序。在项目根目录下创建一个名为 server.py 的文件，并添加以下代码：
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api')
def api():
  return jsonify({'message': 'Hello, World!'})
if __name__ == '__main__':
  app.run(debug=True)
这段代码创建了一个简单的 Flask 应用程序，具有一个名为 /api 的路由，返回了一个 JSON 响应。
4. 集成 Flask 应用程序
现在，我们需要将 Flask 应用程序集成到 Electron 应用程序中。在 main.js 文件中添加以下代码：
const { app, BrowserWindow } = require('electron')
const path = require('path')
const { spawn } = require('child_process')
let flaskProcess = null
const flaskPath = path.join(__dirname, 'server.py')
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
  win.loadFile('index.html')
  win.webContents.openDevTools()
app.whenReady().then(() => {
  flaskProcess = spawn('python', [flaskPath])
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
app.on('before-quit', () => {
  flaskProcess.kill()
这段代码启动了一个 Python 进程来运行 Flask 应用程序，并在应用程序关闭之前杀死该进程。
5. 发起请求
最后，我们需要在渲染进程中发起请求。在项目根目录下创建一个名为 index.html 的文件，并添加以下代码：
<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
  </head>
    <h1 id="message"></h1>
    <script>
      const { ipcRenderer } = require('electron')
      ipcRenderer.on('message', (event, message) => {
        document.getElementById('message').textContent = message
      fetch('http://localhost:5000/api')
        .then(response => response.json())
        .then(data => {
          ipcRenderer.send('message', data.message)
        .catch(error => console.error(error))
    </script>
  </body>
</html>
这段代码使用 IPC 通信来从 Python 进程接收消息，并使用 fetch API 发起一个请求来获取 Flask 应用程序的响应。
6. 运行应用程序
现在，我们可以通过运行以下命令来启动应用程序：
npm start
这将同时启动 Electron 应用程序和 Flask 应用程序，并打开一个窗口，显示来自 Flask 应用程序的消息。
至此，我们已经成功地构建了一个使用 Python、Flask 和 Electron 框架的桌面应用程序。