Fetch 的基本使用

Fetch 的基本使用

1. fetch 的基本使用:**

fetch(请求地址,配置项) --> 返回一个 promise 实例 --> const p = fetch(请求地址,配置项)

**

• 当请求成功时 p 的状态时 fulfilled 值是请求回来的内容，当请求失败时 p 状态未 rejected 值为失败原因
• fetch 与 axios 有个不一样的地方:- 在 fetch 中只要服务器有反馈信息（无论HTTP状态码时多少），都说明网络请求成功，最后 p 都是 fulfilled，只有服务器没有反馈（例如: 请求中断、请求超时、断网等）实例 p 才是 rejected- 在 axios 中只有返回的状态码是以 2 开始的，才会让实例是成功状态- fetch("http://47.121.143.202:3000/banner?type_id=0").then(response=>{ console.log("请求成功:", response);}).catch(reason=>{ console.log("请求失败:", reason);})

2. fetch 配置项（常见）:

• (1) method:请求方式（*GET, POST, PUT, DELETE, HEAD...）
• (2) mode:请求模式（*cors, no-cors, same-origin）--> no-cors: 不允许跨域代理 / same-origin 同源 / core: 支持跨域代理 --> 注意该配置通常不需要去修改，使用默认的 "core" 即可
• (3) cache:缓存模式（*default, no-cache, reload, force-cache, only-if-cached）
• (4) credentials:资源凭证（例如: cookie）（include, *same-origin, omit） --> 如: 浏览器在发送请求时，默认会在请求头中发送 cookie 信息- fetch 默认情况下在跨域请求中，是不允许携带资源凭证的，只有同源下才允许，也可以通过该配置进行对应的设置- include: 同源和跨域情况下都可以- same-origin: 只有同源下才可以- omit: 都不发送（不可以）
• (5) header:自定义请求头信息（普通对象 / Header类实例<如 Content-Type ...>）- // 使用普通对象fetch("http://47.121.143.202:3000/banner?type_id=0",{headers:{// -- 普通对象'Content-Type':"application/json"}}).then(response=>{ console.log("请求成功:", response);}).catch(reason=>{ console.log("请求失败:", reason);})- // 使用 Header 类的实例/** Header 类: 请求头或响应头处理 --> Header.prototype 常用方法 + append: 新增头信息 + delete: 删除头信息 + forEach: 迭代获取都信息 + get: 获取某一项头信息 + has: 验证是否包含某一项 + ... */const headers =newHeaders()// -- header 类实例 headers.append("Content-Type","application/json")fetch("http://47.121.143.202:3000/banner?type_id=0",{ headers // -- 使用 headers 实例}).then(response=>{ console.log("请求成功:", response);}).catch(reason=>{ console.log("请求失败:", reason);})
• (6) body:设置请求主体信息 --> 🔺注意: 该参数只适用于 POST 系列请求，在 GET 系列请求中设置 body 会报错（返回的实例也会变成 rejected 失败状态） --> 🔺且 body 内容的格式是有要求的，并且需要手动在请求头（header）中指定 "Content-Type" 的请求头信息，主要有以下几种方式:- <1> JSON 字符串（Content-Type: application/json）- // 示例:'{"name":"xxx","age":14,...}'|JSON.stringify({name:"xxx",age:18,...})- <2> URLENCODED 字符串（Content-Type: application/x-www-form-urlencoded）- // 示例:"xxx=xxx&xxx=xxx"- <3> 普通字符串（Content-Type: text/plain）- <4> FormData 对象（Content-Type: multipart/form-data） --> 主要运用在文件上传(或者表单提交)的操作中（FormData类: 后续学习）- <5> 二进制或Buffer格式- 注意: 不能使用普通对象- ...
• (7) signal:用于请求中断...
• (8) 相比较于 axios 来讲，fetch 没有对 GET 系列请求 "查询字符串传参/问好传参" 的信息做特殊处理，需要手动在请求地址 url 字符串里进行拼接对应的 GET 系列请求参数

3. fetch responce 对象（Response 类的实例）:

• 1. 私有属性:- body:响应主体信息，即服务器响应的主体信息- 🔺但在 response 中的 body 是一个 ReadableStream 可读流信息，并非是真正我们想要的响应信息，需要通过 response 原型上的方法进行解析，才能拿到真正的数据 ↓- header:响应头信息（Header 类的实例）- status/statusText:返回的 HTTP 状态码及描述- redirected:是否重定向 <type:boolean>- ...
• 2. Response.prototype:有如下常用的几个方法，这些方法主要用于处理 body 可读流信息的，用于把可读流信息转换为我们自己想要的格式后进行返回，返回的时 promise（值就为服务器真正响应的数据信息，即我们想要的格式的 body）为什么返回的是promise实例: 返回值是一个promise实例，这样可以避免，服务器返回的信息在转换中出现问题(例如:服务器返回的是一个流信息，我们转换为ison对象肯定是不对的，此时可以让其返回失败的实例即可)- json- fetch("http://47.121.143.202:3000/banner?type_id=0",).then(response=> response.json())// -- 返回解析后的 body 信息数据- arrayBuffer- blob- formData- text
• 3. 代码示例:- fetch("http://47.121.143.202:3000/banner?type_id=0",).then(response=>{ console.log("请求成功:", response);const{ headers,status }= response // -- 从 response 中获取 header、status ...// -- 判断是否请求成功: 因为进入THEN中的时候，不一定是请求成功「因为状态码可能是各种情况」const{ status, body }= response if(/^(2|3)\d{2}$/.test(status)){// -- 当状态码是以 2 | 3 开头的三位数字时，这才是真正的成功 --> 返回服务器响应的数据return response.json()// -- 🔺返回 response 通过通过对应原型上的方法解析后的数据信息（服务器真正返回的数据信息）}// -- ↑ 状态码不对: 获取数据失败，使其进入 catch 方法中return Promise.reject({// -- 根据服务器接口返回的数据格式，定义对应的自定义服务器请求错误信息，返回至 catch 方法中})}).then(res=>{ console.log(res);}).catch(reason=>{// -- 失败情况: 服务器没有返回任何信息 / 状态码不对 / 数据转换失败 console.log("请求失败:", reason);})

4. fetch 中请求中断处理:

需要借助 JS 中的 AbortController 类的实例进行实现

• AbortController 实例:- 实例属性 signal:中断信号- 实例方法 abort:执行该方法，会根据请求的请求头配置的 signal 属性为该类中的 signal 实例属性，进行对应请求的中断
• 基本使用代码演示:- const control =newAbortController()// -- 1. 创建 AbortController 类实例fetch("http://47.121.143.202:3000/banner?type_id=0",{signal: control.signal // -- 2. 配置请求头中的 signal 属性 --> 请求中断信号 --> 当调用 control 中的 abort 方法时，会立即中断请求}).then(response=>{ console.log("请求成功:", response);}).catch(reason=>{ console.log("请求失败:", reason);// -- 中断请求打印内容 --> 请求失败:DOMException: signal is aborted without reason})control.abort()// -- 3. 当调用 AbortController 中的 abort 实例方法时，会中断上面的请求