网络请求fetch

fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象

fetch()的功能与 XMLHttpRequest 基本相同,但有三个主要的差异。

  • 与 Ajax 类似,Fetch 也是前后端通信的一种方式。Fetch 要比 Ajax 年轻一些
  • Fetch 被称为下一代 Ajax 技术(用来替代 XMLHttpRequest),fetch()使用 Promise,不使用回调函数,因此大大简化了写法,写起来更简洁。
  • fetch()采用模块化设计,API 分散在多个对象上(Response 对象、Request 对象、Headers 对象),更合理一些;相比之下,XMLHttpRequest 的 API 设计并不是很好,输入、输出、状态都在同一个接口管理,容易写出非常混乱的代码。
  • fetch()通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。

在用法上,fetch()接受一个 URL 字符串作为参数,默认向该网址发出 GET 请求,返回一个 Promise 对象。它的基本用法如下。

基本用法:

fetch(url).then(...).catch(...)

详情用法

  • 如果fetch()只接受一个url字符串参数,则表示向该网址发送 get 请求,请求返回一个 Promise 对象
fetch(url).then((response) => {if (response.ok) {return response.json();} else {throw new Error(`HTTP CODE 异常 ${response.status}`);}}).then((data) => {console.log(data);}).catch((err) => {console.log(err);});

例子

  • fetch()接收到的response是一个 Stream 对象,response.json()是一个异步操作,取出所有内容,并将其转为 JSON 对象
  • response.text() 会返回一个新的 promise
     fetch("./my/test.json").then((response) => {if (response.ok) {//response.text()return response.json();}}).then((res) => {console.log("res", res);}).catch((error) => {console.log("error", error);});
await语法改写
async function getJSON() {let url = './my/test.json';try {let response = await fetch(url);return await response.json();} catch (error) {console.log('Request Failed', error);}
}

处理Response对象

    async function request() {const response = await fetch("./my/test.json");console.log("first", response); //}request();
  • fetch()请求成功以后,得到的是一个 Response 对象。它对应服务器的 HTTP 回应。

Response对象的同步属性

  • Response 包含的数据通过 Stream 接口异步读取,但是它还包含一些同步属性,对应 HTTP 回应的标头信息(Headers),可以立即读取
    • Response.ok:返回一个布尔值,表示请求是否成功,true对应 HTTP 请求的状态码 200 到 299,false对应其他的状态码。
    • Response.status属性返回一个数字,表示 HTTP 回应的状态码(例如200,表示成功请求)。
    • Response.statusText属性返回一个字符串,表示 HTTP 回应的状态信息(例如请求成功以后,服务器返回"OK")。
    • Response.url属性返回请求的 URL。如果 URL 存在跳转,该属性返回的是最终 URL。
    • Response.type属性返回请求的类型。可能的值如下
basic:普通请求,即同源请求。
cors:跨域请求。
error:网络错误,主要用于 Service Worker。
opaque:如果fetch()请求的type属性设为no-cors,就会返回这个值,详见请求部分。表示发出的是简单的跨域请求,类似<form>表单的那种跨域请求。
opaqueredirect:如果fetch()请求的redirect属性设为manual,就会返回这个值,详见请求部分
    • Response.redirected属性返回一个布尔值,表示请求是否发生过跳转。
    • body:body 是一个可读的流, 只能读取一次,读过之后就不让再读了
    • bodyUsed 表示 response 对象是否读取过 body 流,默认值为 false,如果读取过就变为 true

判断请求是否成功

fetch()发出请求以后,有一个很重要的注意点:只有网络错误,或者无法连接时,fetch()才会报错,其他情况都不会报错,而是认为请求成功。即使服务器返回的状态码是 4xx 或 5xx,fetch()也不会报错(即 Promise 不会变为 rejected状态)

  • 通过Response.status属性,得到 HTTP 回应的真实状态码,才能判断请求是否成功
  • 另一种方法是判断response.ok是否为true
      async function request() {const response = await fetch("./my/test.json");console.log("1", response.ok, response.status); //true 200if (response.status >= 200 && response.status < 300) {return await response.text();} else {throw new Error(response.statusText);}}request();

Response.headers 属性

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

  • Headers 对象可以使用for...of循环进行遍历
  • 可以在headers中设置属性
  • Headers 对象提供了以下方法,用来操作标头
    • Headers.get():根据指定的键名,返回键值。
    • Headers.has(): 返回一个布尔值,表示是否包含某个标头。
    • Headers.set():将指定的键名设置为新的键值,如果该键名不存在则会添加。
    • Headers.append():添加标头。
    • Headers.delete():删除标头。
    • Headers.keys():返回一个遍历器,可以依次遍历所有键名。
    • Headers.values():返回一个遍历器,可以依次遍历所有键值。
    • Headers.entries():返回一个遍历器,可以依次遍历所有键值对([key, value])。
    • Headers.forEach():依次遍历标头,每个标头都会执行一次参数函数。
let myHeaders = new Headers(); // Currently empty
myHeaders.append("Content-Type", "text/xml");
console.log("first", myHeaders);
async function request() {const response = await fetch("./my/test.json", {headers: {"Content-Type": "application/x-www-form-urlencoded",admin: "spj",},});for (let [key, value] of response.headers) {console.log(`${key} : ${value}`);}
}
request();

读取内容的方法

response.text():得到文本字符串。
response.json():得到 JSON 对象。
response.blob():得到二进制 Blob 对象,用于获取二进制文件。
response.formData():得到 FormData 表单对象。
response.arrayBuffer():得到二进制 ArrayBuffer 对象。
  • 上面5个读取方法都是异步的,返回的都是 Promise 对象。必须等到异步操作结束,才能得到服务器返回的完整数据。
  • response.formData()主要用在 Service Worker 里面,拦截用户提交的表单,修改某些数据以后,再提交给服务器。
  • Response上的方法 arrayBuffer() 接受一个 Response 流,并等待其读取完成。它返回一个 promise 实例,并 resolve 一个 ArrayBuffer 对象
const audioCtx = new globalThis.AudioContext();
//返回一个AudioBufferSourceNode对象
const source = audioCtx.createBufferSource();
async function getData() {const response = await fetch("mp4.mp3");const buffer = await response.arrayBuffer();const decodeData = await audioCtx.decodeAudioData(buffer);source.buffer = decodeData;source.connect(audioCtx.destination);source.loop = true;
}
getData();
source.start();
  • response.blob():得到二进制 Blob 对象,用于获取二进制文件。

<img src="" alt="" />
<body><script>async function request() {const response = await fetch("image.jpeg");const myBlob = await response.blob();console.log("first", myBlob);const objectURL = URL.createObjectURL(myBlob);console.log("first", objectURL);const myImage = document.querySelector("img");myImage.src = objectURL;}request();</script>
</body>

Response.clone()

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

  • Response 接口的 clone() 方法创建一个响应对象的克隆,这个对象在所有方面都是相同的,但是储存在不同的变量中,实现多次读取
async function request() {const response = await fetch("./my/test.json");console.log("1", response.json()); //console.log("2", response.text()()); //Failed to execute 'text' on 'Response': body stream already read
}
request();
       const response = await fetch("image.jpeg");const response1 = response.clone();const myBlob = await response.blob();const myBlob1 = await response1.blob();

Response.body 属性

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

  • 它可以用来分块读取内容,应用之一就是显示下载的进度。
  • response.body.getReader()方法返回一个遍历器。这个遍历器的read()方法每次返回一个对象,表示本次读取的内容块
    • done属性是一个布尔值,用来判断有没有读完;value属性是一个 arrayBuffer 数组,表示内容块的内容,而value.length属性是当前块的大小
    async function request() {const response = await fetch("image.jpeg");const reader = response.body.getReader();console.log("reader", reader);while (true) {const { done, value } = await reader.read();if (done) {break;}console.log("value", value, done);}}request();

fetch()的第二个参数:定制 HTTP 请求

相关配置

属性

说明

method

请求使用的方法,如 GET、POST、PUT 等

body

请求的 body(请求体) 信息,GET 方法不包含 body 信息

headers

  • 请求的头信息,形式为 Headers(opens new window)的对象或包含 ByteString(opens new window)值的对象字面量
  • 有些标头不能通过headers属性设置,比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成,无法修改

mode

请求的模式,如 cors、no-cors 或者 same-origin

  • cors:跨域请求,且要求后端需要设置 cors 响应头
  • no-cors:允许跨域,但服务端不设置 cors 响应头,如果图片、脚本、样式
  • same-origin:同源请求,限制了不能跨域

credentials

请求是否携带 Cookie,有三个值:omit、same-origin、include

  • omit:缺省值,默认为该值
  • same-origin: 同源, 表示同域请求才发送 cookie
  • include:跨域请求中需要带有 cookie 时
fetch(url, {// 请求使用的方法,如 `GET`、`POST`、`PUT` 等method: "post",
// post请求体携带数据,不传递就是 null,可以是键值对、JSON、FormDatabody: "username=admin&password=123456",headers: {"Content-Type": "application/x-www-form-urlencoded",},// 请求体携带数据body: "username=icoding&sex=male",// 跨域时设置,默认值 corsmode: "cors",// 跨域时携带 Cookiecredentials: "include",
});

示例

post请求
async function request() {const response = await fetch(url, {method: "POST",headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",},body: "foo=bar&lorem=ipsum",});
}
request();
提交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('xxxx/user', {method: 'POST',headers: {'Content-Type': 'application/json;charset=utf-8'}, body: JSON.stringify(user) 
});
提交表单

const form = document.querySelector('form');
const response = await fetch('xxx/user', {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('xxx/avatars', {method: 'POST',body: data
});
  • 上传二进制文件时,不用修改标头的Content-Type,浏览器会自动设置。
直接上传二进制文件
  • fetch()也可以直接上传二进制数据,将 Blob 或 arrayBuffer 数据放在body属性里面。
let blob = await new Promise(resolve =>   canvasElem.toBlob(resolve,  'image/png')
);
let response = await fetch('xxx/image', {method:  'POST',body: blob
});

完整的配置


const response = fetch(url, {method: "GET/POST",headers: {"Content-Type": "text/plain;charset=UTF-8"},body: undefined,referrer: "about:client",referrerPolicy: "no-referrer-when-downgrade",mode: "cors", credentials: "same-origin",cache: "default",redirect: "follow",integrity: "",keepalive: false,signal: undefined
});

fetch()请求的底层用的是 Request() 对象的接口,参数完全一样,因此上面的 API 也是Request()的 API,

取消fetch()请求

fetch()请求发送以后,如果中途想要取消,需要使用AbortController对象。

let controller = new AbortController();
let signal = controller.signal;
// fetch(url, {
//   signal: controller.signal
// });
// signal.addEventListener('abort',
//   () => console.log('abort!')
// );
// controller.abort(); // 取消
// console.log(signal.aborted); // truelet controller = new AbortController();
setTimeout(() => controller.abort(), 1000);
try {let response = await fetch('/long-operation', {signal:signal});
} catch(err) {if (err.name == 'AbortError') {console.log('Aborted!');} else {throw err;}
}

参考文档:

  • Fetch API 教程 - 阮一峰的网络日志
  • Network requests: Fetch
  • node-fetch
  • Introduction to fetch()
  • Using Fetch
  • Javascript Fetch API: The XMLHttpRequest evolution

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript---环境对象this

环境对象&#xff1a;指的是 函数 内部特殊的变量 this&#xff0c;它代表着当前函数运行时所处的环境。每个函数都有环境对象this。函数调用的方式不同&#xff0c;this指代的对象不同。 普通函数里面this指向的是window谁调用&#xff0c;this就指向谁&#xff08;是判断thi…

React Flow

// 创建项目 npm create vitelatest my-react-flow-app -- --template react // 安装插件 npm install reactflow npm install antd // 运行项目 npm run dev 1、App.jsx import { useCallback, useState } from react; import ReactFlow, {addEdge,ReactFlowProvider,MiniMap…

享元模式——实现对象的复用

1、简介 1.1、概述 当一个软件系统在运行时产生的对象数量太多&#xff0c;将导致运行代价过高&#xff0c;带来系统性能下降等问题。例如&#xff0c;在一个文本字符串中存在很多重复的字符&#xff0c;如果每个字符都用一个单独的对象来表示&#xff0c;将会占用较多的内存…

hive的metastore问题汇总

1. metastore内存飙升 1 问题 metastore内存飙升降不下来; spark集群提交的任务无法运行, 只申请到了dirver的资源; 2 原因 当Spark任务无法获取足够资源时&#xff0c;因为任务无法继续进行&#xff0c;不能将元数据从Metastore返回给任务 后&#xff0c;这些元数据暂存在…

39.手机导航

手机导航 html部分 <div class"phone"><div class"content"><img class"active" src"./static/20180529205331_yhGyf.jpeg" alt"" srcset""><img src"./static/20190214214253_hsjqw…

【leetcode】7.29记录

题目考察内容思路踩坑剑指Offer 05.替换空格(easy)字符串创建StringBuffer&#xff0c;用charAt获取每个字符并判断&#xff0c;用sb.append©添加字符&#xff0c;最后返回sb.toString()541.反转字符串 II (easy)字符串针对每种情况直接实现就行string.substring(start,en…

【hive 运维】hive注释/数据支持中文

文章目录 一. 设置mysql中的hive库二. hive-site.xml 设置三. 测试 hive支持中文需要关注两个方面&#xff1a; 设置hive 元数据库中的一些表设置hive-site.xml. 一. 设置mysql中的hive库 use hivedb; alter table TBLS modify column TBL_NAME varchar(1000) character se…

TCP socket编程

一、服务端代码 #encoding utf -8 #导入socket库 from socket import * #等待客户端来连接&#xff0c;主机地址为0.0.0.0表示绑定本机所有网络接口ip地址 IP 0.0.0.0 #端口号 PORT 50000 #定义一次从socket缓存区最多读入512个字节数据 BUFLEN 512 #实例化一个socket编程…

【CNN-BiLSTM-attention】基于高斯混合模型聚类的风电场短期功率预测方法(Pythonmatlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

比较常见CPU的区别:Intel、ARM、AMD

一、开发公司不同 1、Intel&#xff1a;是英特尔公司开发的中央处理器&#xff0c;有移动、台式、服务器三个系列。 2、ARM&#xff1a;是英国Acorn有限公司设计的低功耗成本的第一款RISC微处理器。 3、AMD&#xff1a;由AMD公司生产的处理器。 二、技术不同 1、Intel&…

测试|自动化测试(了解)

测试|自动化测试&#xff08;了解&#xff09; 1.什么是自动化测试☆☆☆☆ 自动化测试相当于把人工测试手段进行转换&#xff0c;让代码执行。 2.自动化测试的分类☆☆☆☆ 注&#xff1a;这里只是常见的自动化测试&#xff0c;并不全部罗列。 1.单元自动化测试 其中Java…

嵌入式硬件系统的基本组成

嵌入式硬件系统的基本组成 嵌入式系统的硬件是以包含嵌入式微处理器的SOC为核心&#xff0c;主要由SOC、总线、存储器、输入/输出接口和设备组成。 嵌入式微处理器 每个嵌入式系统至少包含一个嵌入式微处理器 嵌入式微处理器体系结构可采用冯.诺依曼&#xff08;Von Neumann&…

前后端分离实现博客系统

文章目录 博客系统前言1. 前端1.1 登陆页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面 2. 后端2.1 项目部署2.1.1 创建maven项目2.1.2 引入依赖2.1.3 创建目录结构2.1.4 部署程序 2.2 逻辑设计2.2.1 数据库设计2.2.2 实体类设计2.2.3 Dao层设计2.2.3.1 BlogDao 2.2.4 D…

qt添加图标

1.添加资源 选择QtWidgetsApp.qrc文件打开 添加图标文件路径 添加图标文件 2.按钮添加图标 图标路径为:/res/res/swicth.jpg &#xff08;1&#xff09;代码设置图标 ui.pushButton_OPen->setIcon(QIcon(":/res/res/swicth.jpg")); &#xff08;2&#xff09;属…

apple pencil到底值不值得买?好用的iPad电容笔

随着ipad平板型号版本的不断更新&#xff0c;其的功能越来越多&#xff0c;现在它的性能已经可以和笔记本电脑相媲美了。而现在&#xff0c;随着技术的进步&#xff0c;IPAD已经不再是单纯的娱乐&#xff0c;而是一种功能强大的学习、绘画、工作等等。要增加生产效率&#xff0…

数据科学、统计学、商业分析

数据科学、统计学、商业分析是在各方面有着不同的侧重和方向的领域。 1.专业技能 数据科学&#xff08;Data Science&#xff09;&#xff1a;数据科学涉及从大量数据中提取有价值的信息、模式和洞察力的领域。它使用多种技术和领域知识&#xff0c;如统计学、机器学习、数据库…

【数据结构与算法】归并排序

归并排序 归并排序&#xff08;MERGE-SORT&#xff09;是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的分治&#xff08;divide-and-conquer&#xff09;策略&#xff08;分治法将问题分&#xff08;divide&#xff09;成一些小的问题然后递归求解&#xff0c;而…

前端面试的性能优化部分(1)每篇10题

1. 懒加载的概念 懒加载&#xff08;Lazy Loading&#xff09;是一种优化技术&#xff0c;它用于延迟加载页面资源&#xff0c;只在需要时才加载特定的内容&#xff0c;而不是在页面初始加载时一次性加载所有资源。懒加载的目的是提高页面加载速度和性能&#xff0c;尤其对于单…

React之路由

React之路由 背景&#xff1a; react: 18.2.0 路由&#xff1a;react-router-dom: 6.14.2 1、路由表配置 src下新建router/index.ts import React, { lazy } from react import { Navigate } from react-router-dom import Layout from /layout/Index import { JSX } from rea…

#P1007. [NOIP2007提高组] 矩阵取数游戏

题目描述 帅帅经常跟同学玩一个矩阵取数游戏&#xff1a;对于一个给定的 n \times mnm 的矩阵&#xff0c;矩阵中的每个元素 a_{i,j}ai,j​ 均为非负整数。游戏规则如下&#xff1a; 每次取数时须从每行各取走一个元素&#xff0c;共 nn 个。经过 mm 次后取完矩阵内所有元素&…