首页 » 网站推广 » phpfetch技巧_嗯还在用Ajax嘛Fetch理解一下呀

phpfetch技巧_嗯还在用Ajax嘛Fetch理解一下呀

duote123 2024-10-28 0

扫一扫用手机浏览

文章目录 [+]

Fetch API 供应了一个获取资源的接口(包括跨域要求)。
任何利用过XMLHttpRequest的人都能轻松上手,而且新的 API 供应了更强大和灵巧的功能集。

Fetch 供应了对Request和Response,Headers(以及其他与网络要求有关的)工具的通用定义

phpfetch技巧_嗯还在用Ajax嘛Fetch理解一下呀

fetch() 必须接管一个参数——资源的路径。
无论要求成功与否,它都返回一个Promise工具,resolve 对应要求的 Response。
你也可以传一个可选的第二个参数 init。

phpfetch技巧_嗯还在用Ajax嘛Fetch理解一下呀
(图片来自网络侵删)

一旦Response被返回,就可以利用一些方法来定义内容的形式,以及应该如何处理内容,你也可以通过 Request() 和 Response() 的布局函数直接创建要乞降相应,但是我们不建议这么做。

Fetch 接口Headers:相称于 response/request 的头信息Request:相称于一个资源要求Response:相称于要求的相应利用 Fetch

Fetch API 供应了一个JavaScript接口,用于访问和操纵 HTTP 管道的一些详细部分,例如要乞降相应。
它还供应了一个全局fetch()方法,该方法供应了一种大略,合理的办法来跨网络异步获取资源。

fetch 规范与jQuery.ajax()紧张有以下的不同:

当吸收到一个代表缺点的 HTTP 状态码时,从 fetch() 返回的Promise不会被标记为 reject,纵然相应的 HTTP 状态码是 404 或 500。
相反,它会将Promise状态标记为 resolve (如果相应的 HTTP 状态码不在 200 - 299 的范围内,则设置 resolve 返回值的 ok 属性为 false ),仅当网络故障时或要求被阻挡时,才会标记为 reject。
+fetch不会发送跨域 cookies,除非你利用了credentials的初始化选项。
(自2018 年 8 月往后,默认的 credentials 政策变更为 same-origin。
Firefox 也在 61.0b13 版本中进行了修正)fetch()利用 Promise,不该用回调函数,因此大大简化了写法,写起来更简洁。
fetch()采取模块化设计,API 分散在多个工具上(Response 工具、Request 工具、Headers 工具),更合理一些;比较之下,XMLHttpRequest 的 API 设计并不是很好,输入、输出、状态都在同一个接口管理,随意马虎写出非常混乱的代码。
fetch()通过数据流(Stream 工具)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对付要求大文件或者网速慢的场景相称有用。
XMLHTTPRequest 工具不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。

在用法上,fetch()接管一个URL字符串作为参数,默认向该网址发出GET要求,返回一个 Promise 工具。

环境准备

这里我们用Node环境来学习,当然在浏览器更有可比性,须要安装基于Node的依赖包node-fetch,这里一定要把稳版本问题

node-fetch用于做事器端,即只能在nodejs中用whatwg-fetch用于客户端,即用于在浏览器没有原生支持fetch的情形isomorphic-fetch可以在nodejs和浏览器两种环境中运行,是对whatwg-fetch的包装。

npm install node-fetch@2

同时我们须要一个Web做事用作测试,这里用python搭一个大略的Web做事

#!/usr/bin/env python3# -- encoding: utf-8 --# Python 3.9.0# pip install flask'''@File : fetch.py@Time : 2022/03/04 18:59:02@Author : Li Ruilong@Version : 1.0@Contact : 1224965096@qq.com@Desc : Fetch学习Demo'''from time import sleepfrom flask import Flask,jsonify,request,send_from_directoryimport os# configurationDEBUG = Trueapp = Flask(__name__)@app.route("/")@app.route("/index")def default(): ''' @Time : 2022/03/04 18:58:42 @Author : Li Ruilong @Version : 1.0 @Desc : 默认页面 ''' return "<h1>Fetch学习Demo<h1/>"@app.route('/init', methods=['GET'])def init(): ''' @Time : 2022/03/04 19:41:40 @Author : Li Ruilong @Version : 1.0 @Desc : get要求返回JSON ''' data = ["Ajax","Fetch","Promise","Axios"] return jsonify(data)@app.route("/add",methods=["POST"])def add(): ''' @Time : 2022/03/04 19:43:05 @Author : Li Ruilong @Version : 1.0 @Desc : Post要求 ''' data = request.json print(data, sep='\n') return jsonify({"msg":"Post要求成功","code":"0"})@app.route("/download/<filename>")def download(filename): print(filename) ''' @Time : 2022/03/04 22:30:12 @Author : Li Ruilong @Version : 1.0 @Desc : 下载文件 ''' directory = os.getcwd() print(directory) return send_from_directory(directory, filename, as_attachment=True)@app.route('/upload', methods=['POST', 'PUT'])def upload(): ''' @Time : 2021/12/15 10:32:03 @Author : Li Ruilong @Version : 1.0 @Desc : 上传文件 ''' if request.method == 'POST': try: f = request.files['file'] print("上传的文件名:===", f.filename) basepath = os.path.dirname(__file__) # 当前文件所在路径 upload_path = os.path.join(basepath, "\\", str(f.filename)) f.save(upload_path) print("保存的文件路径:"+upload_path) except Exception as e: print("上传文件失落败", e) return jsonify({"msg":"上传文件OK","code":"0"}),200@app.route("/stop/<int:s>")def stop(s): sleep(s) return "OK",200if __name__ == '__main__': app.run(host='127.0.0.1', port=37881, debug=DEBUG)

data.json文件

[ { "site": "npr", "link": "http://www.npr.org/rss/rss.php?id=1001", "type": "rss" }, { "site": "npr", "link": "http://www.npr.org/rss/rss.php?id=1008", "type": "rss" }]

准备事情做好往后,我们开始愉快的学习吧

一个基本的fetch要求设置起来很大略。
看看下面的代码:

这是一个回调风格的要求,从做事器获取JSON数据。
在Node环境的一个Demo

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");fetch('http://127.0.0.1:37881/download/data.json') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log('Request Failed', err));

fetch()吸收到的response是一个Stream工具,response.json()是一个异步操作,取出所有内容,并将其转为 JSON 工具。

整理上看和axios类似,相同点都是基于ES 6 的Promise工具,在Node环境,都是基于HTTP模块实现,不同点,axios在浏览器中,是基于XMLHttpRequests来实现异步通信的,而fetch是一个新的API,是XMLHttpRequest的最新替代技能 ,下面是一个axios的例子.

const axios = require('axios').default;const { v4: uuidv4 } = require('uuid');let subscriptionKey = "3c6588c7026b41a47f81551cb4a737";let endpoint = "https://api.translator.azure.cn/";let location = "chinanorth";axios({ baseURL: endpoint, url: '/translate', method: 'post', headers: { 'Ocp-Apim-Subscription-Key': subscriptionKey, 'Ocp-Apim-Subscription-Region': location, 'Content-type': 'application/json', 'X-ClientTraceId': uuidv4().toString() }, params: { 'api-version': '3.0', 'from': 'zh-Hans', 'to': ['zh-Hant', 'en'] }, data: [{ 'text': '我徒然学会了抗拒热闹,却还来不及透悟真正的生僻。
--------张大春' }], responseType: 'json'}).then(function(response){ console.log(JSON.stringify(response.data, null, 4));}).catch(function (error) { console.log(error); });

Promise 可以利用await语法改写,使得语义更清晰。

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/download/data.json'; try { let response = await fetch(url); let data =await response.json(); console.log(data); } catch (e) { console.log("Oops, error", e); }})()

await语句必须放在try...catch里面,这样才能捕捉异步操作中可能发生的缺点.

=====PS D:\GolandProjects\code-master\demo> node fetch[ { site: 'npr', link: 'http://www.npr.org/rss/rss.php?id=1001', type: 'rss' }, { site: 'npr', link: 'http://www.npr.org/rss/rss.php?id=1008', type: 'rss' }]PS D:\GolandProjects\code-master\demo> Response 工具:处理 HTTP 回应

fetch()要求成功往后,得到的是一个Response工具。
它对应做事器的 HTTP 回应。

const response = await fetch(url);

Response 包含de同步属性,对应 HTTP 回应的标头信息(Headers),可以立即读取

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/init'; try { let response = await fetch(url); //同步属性,对应 HTTP 回应的标头信息(Headers),可以立即读取 console.log(response.ok); console.log(response.status); console.log(response.statusText); console.log(response.type); console.log(response.url); console.log(response.redirected) //Response 包含的数据通过 Stream 接口异步读取 let data =await response.json(); console.log(data); } catch (e) { console.log("Oops, error", e); }})()

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"true200OKundefinedhttp://127.0.0.1:37881/initfalse[ 'Ajax', 'Fetch', 'Promise', 'Axios' ][Done] exited with code=0 in 0.253 seconds

response.ok:属性返回一个布尔值,表示要求是否成功,true对应 HTTP 要求的状态码 200 到 299,false对应其他的状态码。

response.status:属性返回一个数字,表示 HTTP 回应的状态码(例如200,表示成功要求)。

response.statusText:属性返回一个字符串,表示 HTTP 回应的状态信息(例如要求成功往后,做事器返回"OK")。

response.url:属性返回要求的 URL。
如果 URL 存在跳转,该属性返回的是终极 URL。

response.type:属性返回要求的类型。
可能的值如下:

通过状态码判断要求是否成功

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/init'; try { let response = await fetch(url); if (response.status >= 200 && response.status < 300){ let data = await response.json(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

我们把python的web做事接口里抛出一个非常,直接到了catch里面

@app.route('/init', methods=['GET'])def init(): ''' @Time : 2022/03/04 19:41:40 @Author : Li Ruilong @Version : 1.0 @Desc : get要求返回JSON ''' data = ["Ajax","Fetch","Promise","Axios"] raise Exception('这是一个要求非常的仿照') return jsonify(data)

实行报错:内部做事器缺点,即500

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"Oops, error Error: INTERNAL SERVER ERROR at d:\GolandProjects\code-master\demo\fetch.js:23:15 at processTicksAndRejections (internal/process/task_queues.js:93:5)

修正接口返回状态码为400

@app.route('/init', methods=['GET'])def init(): ''' @Time : 2022/03/04 19:41:40 @Author : Li Ruilong @Version : 1.0 @Desc : get要求返回JSON ''' data = ["Ajax","Fetch","Promise","Axios"] return jsonify(data),400

报缺点要求

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"INTERNAL SERVER ERROROops, error Error: INTERNAL SERVER ERROR at d:\GolandProjects\code-master\demo\fetch.js:24:19 at processTicksAndRejections (internal/process/task_queues.js:93:5)[Done] exited with code=0 in 0.261 seconds

也可以直接通过response.ok来判断

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/init'; try { let response = await fetch(url); if (response.ok){ let data = await response.json(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

修正接口返回状态码为404

@app.route('/init', methods=['GET'])def init(): ''' @Time : 2022/03/04 19:41:40 @Author : Li Ruilong @Version : 1.0 @Desc : get要求返回JSON ''' data = ["Ajax","Fetch","Promise","Axios"] return jsonify(data),404

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"NOT FOUNDOops, error Error: NOT FOUND at d:\GolandProjects\code-master\demo\fetch.js:24:19 at processTicksAndRejections (internal/process/task_queues.js:93:5)[Done] exited with code=0 in 0.257 secondsResponse.headers 属性

Response 工具还有一个Response.headers属性,指向一个Headers工具,对应 HTTP 回应的所有标头。

Headers 工具可以利用for...of循环进行遍历。

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/init'; try { let response = await fetch(url); if (response.ok){ let data = await response.json(); console.log(data); for (let [key, value] of response.headers) { //console.log(key+":"+ value); console.log(`${key} : ${value}`); } return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"[ 'Ajax', 'Fetch', 'Promise', 'Axios' ]content-length : 51content-type : application/jsondate : Sat, 05 Mar 2022 15:14:47 GMTserver : Werkzeug/2.0.2 Python/3.9.0[Done] exited with code=0 in 0.26 seconds

Headers 工具供应了以下方法,用来操作标头。
HTTP 回应来说,修正标头意义不大

Headers.get():根据指定的键名,返回键值。
Headers.has(): 返回一个布尔值,表示是否包含某个标头。
Headers.set():将指定的键名设置为新的键值,如果该键名不存在则会添加。
Headers.append():添加标头。
Headers.delete():删除标头。
Headers.keys():返回一个遍历器,可以依次遍历所有键名。
Headers.values():返回一个遍历器,可以依次遍历所有键值。
Headers.entries():返回一个遍历器,可以依次遍历所有键值对([key, value])。
Headers.forEach():依次遍历标头,每个标头都会实行一次参数函数。
读取内容的方法

Response工具根据做事器返回的不同类型的数据,供应了不同的读取方法。
读取方法都是异步的,返回的都是 Promise 工具。
必须等到异步操作结束,才能得到做事器返回的完全数据`。

response.text():得到文本字符串。
response.json():得到 JSON 工具。
response.blob():得到二进制 Blob 工具。
response.formData():得到 FormData 表单工具。
response.arrayBuffer():得到二进制 ArrayBuffer 工具。

「response.text()可以用于获取文本数据,比如HTML文件。

@app.route("/")@app.route("/index")def default(): ''' @Time : 2022/03/04 18:58:42 @Author : Li Ruilong @Version : 1.0 @Desc : 默认页面 ''' return "<h1>Fetch学习Demo<h1/>"

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/'; try { let response = await fetch(url); if (response.ok){ let data = await response.text(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

「response.json() 紧张用于获取做事器返回的 JSON 数据」

「response.formData()紧张用在 Service Worker 里面,拦截用户提交的表单,修正某些数据往后,再提交给做事器。

「response.blob()用于获取二进制文件。

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/download/data.json'; try { let response = await fetch(url); if (response.ok){ let data = await response.blob(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"Blob { [Symbol(type)]: 'application/json', [Symbol(buffer)]: <Buffer 5b 0a 09 7b 0a 09 09 22 73 69 74 65 22 3a 20 22 6e 70 72 22 2c 0a 09 09 22 6c 69 6e 6b 22 3a 20 22 68 74 74 70 3a 2f 2f 77 77 77 2e 6e 70 72 2e 6f 72 ... 141 more bytes>}[Done] exited with code=0 in 0.847 seconds

response.arrayBuffer()紧张用于获取流媒体文件。

const audioCtx = new window.AudioContext();const source = audioCtx.createBufferSource();const response = await fetch('song.ogg');const buffer = await response.arrayBuffer();const decodeData = await audioCtx.decodeAudioData(buffer);source.buffer = buffer;source.connect(audioCtx.destination);source.loop = true;Response.clone()

Stream 工具只能读取一次,读取完就没了。
这意味着,前一节的五个读取方法,只能利用一个,否则会报错。

Response 工具供应Response.clone()方法,创建Response工具的副本,实现多次读取。

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/download/data.json'; try { let response = await fetch(url); let response1 = response.clone(); if (response.ok){ let data = await response.json(); let data1 = await response1.json() console.log(data1); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"[ { site: 'npr', link: 'http://www.npr.org/rss/rss.php?id=1001', type: 'rss' }, { site: 'npr', link: 'http://www.npr.org/rss/rss.php?id=1008', type: 'rss' }][Done] exited with code=0 in 0.25 seconds

Response 工具还有一个Response.redirect()方法,用于将 Response 结果重定向到指定的 URL。
该方法一样平常只用在 Service Worker 里面

Response.body 属性

Response.body属性是 Response 工具暴露出的底层接口,返回一个 ReadableStream 工具,供用户操作。

它可以用来分块读取内容,运用之一便是显示下载的进度。

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { let url = 'http://127.0.0.1:37881/download/data.json'; fetch(url) .then(response => response.body) .then(res => res.on('readable', () => { let chunk; while (null !== (chunk = res.read())) { console.log(chunk.toString()); } })) .catch(err => console.log(err));})()第二个参数init:定制 HTTP 要求

fetch()的第一个参数是 URL,还可以接管第二个参数,作为配置工具,定制发出的HTTP 要求。

HTTP 要求的方法、标头、数据体都在这个工具里面设置

Post要求通报JSON

@app.route("/add",methods=["POST"])def add(): ''' @Time : 2022/03/04 19:43:05 @Author : Li Ruilong @Version : 1.0 @Desc : Post要求 ''' data = request.json print(data, sep='\n') return jsonify({"msg":"Post要求成功","code":"0"})

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 /const fetch = require("node-fetch");(async () => { const url = 'http://127.0.0.1:37881/add'; const body = { name: 'John', surname: 'Smith' }; try { let response = await fetch(url,{ method: 'post', body: JSON.stringify(body), headers: {'Content-Type': 'application/json;charset=utf-8'} }); if (response.ok){ const data = await response.json(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

namesurname127.0.0.1 - - [06/Mar/2022 02:27:42] "POST /add HTTP/1.1" 200 -========[Running] node "d:\GolandProjects\code-master\demo\fetch.js"{ code: '0', msg: 'Post要求成功' }[Done] exited with code=0 in 0.293 seconds文件上传

@app.route('/upload', methods=['POST', 'PUT'])def upload(): ''' @Time : 2021/12/15 10:32:03 @Author : Li Ruilong @Version : 1.0 @Desc : 上传文件 ''' if request.method == 'POST': try: f = request.files['file'] print("上传的文件名:===", f.filename) basepath = os.path.dirname(__file__) # 当前文件所在路径 upload_path = os.path.join(basepath, "\\", str(f.filename)) f.save(upload_path) print("保存的文件路径:"+upload_path) except Exception as e: print("上传文件失落败", e) return jsonify({"msg":"上传文件OK","code":"0"}),200

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 / const fs = require('fs'); const fetch = require('node-fetch'); const FormData = require('form-data'); let fileStream = fs.readFileSync("./data.json");//读取文件 let formdata = new FormData(); const mimetype = 'text/plain' formdata.append("file", fileStream, { filename: "./data.json",//上传的文件名 contentType: mimetype,//文件类型标识});(async () => { const url = 'http://127.0.0.1:37881/upload'; try { let response = await fetch(url,{ method: 'post', body: formdata , headers: formdata.getHeaders() }); if (response.ok){ const data = await response.json(); console.log(data); return data; }else{ console.log(response.statusText); throw new Error(response.statusText); } } catch (e) { console.log("Oops, error", e); }})()

上传的文件名:=== data.json保存的文件路径:d:\data.json127.0.0.1 - - [06/Mar/2022 01:37:51] "POST /upload HTTP/1.1" 200 -============[Running] node "d:\GolandProjects\code-master\demo\fetch.js"{ code: '0', msg: '上传文件OK' }fetch()配置工具的完全 API

const response = fetch(url, { method: "GET", headers: { "Content-Type": "text/plain;charset=UTF-8" }, body: undefined, referrer: "about:client", //referrer属性用于设定fetch()要求的referer标头。
referrerPolicy: "no-referrer-when-downgrade", //referrerPolicy属性用于设定Referer标头的规则 mode: "cors", // mode属性指定要求的模式 credentials: "same-origin", //credentials属性指定是否发送 Cookie。
cache: "default", //cache属性指定如何处理缓存 redirect: "follow", //redirect属性指定 HTTP 跳转的处理方法 integrity: "", //integrity属性指定一个哈希值,用于检讨 HTTP 回应传回的数据是否即是这个预先设定的哈希值。
keepalive: false, /// keepalive属性用于页面卸载时,见告浏览器在后台保持连接,连续发送数据。
signal: undefined //signal属性指定一个 AbortSignal 实例,用于取消fetch()要求});
取消fetch()要求

fetch()要求发送往后,如果中途想要取消,须要利用AbortController工具。

@app.route("/stop/<int:s>")def stop(s): sleep(s) return "OK",200

要求进去就寝10s,在5s的时候终止要求,新建AbortController实例,然后发送fetch()要求,配置工具的signal属性必须指定吸收AbortController实例发送的旗子暗记controller.signal。

controller.abort()方法用于发出取消旗子暗记。
这时会触发abort事宜,这个事宜可以监听,也可以通过controller.signal.aborted属性判断取消旗子暗记是否已经发出

// -- encoding: utf-8 --/ @File : fetch.js @Time : 2022/03/04 22:04:04 @Author : Li Ruilong @Version : 1.0 @Contact : 1224965096@qq.com @Desc : Fetch学习 / const fetch = require('node-fetch'); //npm install abort-controller const AbortController = globalThis.AbortController || require('abort-controller') const controller = new AbortController(); const timeout = setTimeout(() => { controller.abort(); }, 5000); (async () => { const url = 'http://127.0.0.1:37881/stop/10'; try { const response = await fetch(url, {signal: controller.signal}); const data = await response.text(); console.log(data) } catch (error) { console.log('request was aborted',error); } finally { clearTimeout(timeout); }})()

[Running] node "d:\GolandProjects\code-master\demo\fetch.js"request was aborted AbortError: The user aborted a request.

「Node 环境」

PS D:\GolandProjects\code-master\demo> node -vv12.13.1PS D:\GolandProjects\code-master\demo> npm -v6.12.1PS D:\GolandProjects\code-master\demo> npm init -y

{ "name": "demo", "version": "1.0.0", "description": "", "main": "fetch.js", "dependencies": { "abort-controller": "^3.0.0", "form-data": "^4.0.0", "node-fetch": "^2.6.7" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}

「python 环境」

PS D:\GolandProjects\code-master> python -VPython 3.9.0PS D:\GolandProjects\code-master> pip -Vpip 20.2.3 from d:\python\python310\lib\site-packages\pip (python 3.9)PS E:\docker> flask --versionPython 3.9.0Flask 2.0.2Werkzeug 2.0.2PS E:\docker>

标签:

相关文章

招商蛇口中国房地产龙头企业,未来可期

招商蛇口(股票代码:001979),作为中国房地产企业的领军企业,自成立以来始终秉持“以人为本,追求卓越”的经营理念,致力于打造高...

网站推广 2025-02-18 阅读0 评论0