fetch

最新推荐文章于 2023-07-28 13:44:14 发布

One-Direction

最新推荐文章于 2023-07-28 13:44:14 发布

阅读量314

点赞数 1

分类专栏： ES6 文章标签： ES6

本文链接：https://blog.csdn.net/BUCTOJ/article/details/98764326

版权

ES6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

前言
Fetch
实例
结论

前言

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。

这是官方API中的第一句话，可以看出fetch是Web API中新增的，用于取代XMLHttpRequest的网络请求框架，它比之更强大。下面我们来了解它的使用。

Fetch

fetch返回的其实是一个Promise函数。我们先来看一个完整的请求代码：

const url = '192.168.32.45:8081/login.shtml'

fetch(url, {
	method: 'POST',
	headers: {
		'Accept': 'application/json',
    	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
		username: 'fll',
		password: '123'
	})
})
.then((response) => {
	if(response.status == 200) {
		return response
	}
})
.then((data) => {
	return data.text()
}).then((text) => {
	console.log('请求成功', text)
}).catch((err) => {
	console.log('请求错误', err)
})

fetch的参数有两个参数，第一个是url，就是请求的路径；

Request

另一个是Request对象，包括一下几种：

method: 请求方法：GET、POST。
headers：请求头信息，形式为Headers对象或者ByteString。上述例子就是一个json请求的请求头。
body: 请求参数：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 - HEAD 方法的请求不能包含 body 信息。
mode：请求的模式。如 cors, no-cors, same-origin, navigate
cache: 缓存模式，如default, reload, no-cache

详细信息请参考Request
如果你对请求头不太熟悉的，可以参考Headers

Response

上面我们说了fetch的返回的是一个Promise对象。然后会携带Response 对象。

Response对象：
- 属性：
  - status (number) - HTTP请求结果参数，在100–599 范围， 200 为成功
  - statusText (String) - 服务器返回的状态报告
  - ok (boolean) - 如果返回200表示请求成功则为true
  - headers (Headers) - 返回头部信息，下面详细介绍
  - url(String) - 请求的地址
- 方法：
  - text() - 以string的形式生成请求text
  - json -生成JSON.parse(responseText)的结果
  - blob - 生成一个Blob
  - arrayBuffer() - 生成一个ArrayBuffer
  - formData- 生成格式化的数据，用于其他请求
- 其他方法：
  - clone()
  - Response.error()
  - Response.redirect()

response.headers

has(name) (boolean) - 判断是否存在该信息头
get(name) (String) - 获取信息头的数据
getAll(name) (Array) - 获取所有头部数据
set(name, value) - 添加headers的内容
delete(name) - 删除header的信息
forEach - 循环读取header的信息

实例

如果我们想要访问数据，我们需要两个.then()处理程序（回调）。但是如果我们想要操纵资源，我们只需要一个 .then()处理程序。但是，我们可以使用第二个来确保已发送值。
第一个response它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们可以使用json()方法，除了
resonance.json()还有resonance.text() 等等；详情请看mozilla官方文档

基本提取API模板

//基于fetch的基本模块
fetch
.then(response.something) //定义返回的类型和数据格式 resonance.json()
.then(data) // 返回的数据

注意！以上示例仅用于说明目的。如果执行它，代码将不起作用。

获取API示例
- 显示用户
- 显示用户列表
- 创建新用户
- 删除用户
- 更新用户

注意！资源不会真正在服务器上创建，但会返回虚假结果来模仿真实服务器。

1.显示用户

如前所述，显示单个用户的过程包括两个 .then()处理程序（回调），第一个用于定义对象，第二个用于访问数据。
请注意，只需阅读查询url字符串，/users/2我们就能理解/预测API的作用。这也是rest api 的重要意义之一
例子

fetch('https://jsonplaceholder.typicode.com/users/2')
.then(response => response.json()) //定义返回的类型和数据格式
.then(data => console.log(data)) // 返回的数据
// 数据示例：
// {
//     "id": 2,
//     "name": "Ervin Howell",
//     "username": "Antonette",
//     "email": "Shanna@melissa.tv",
//     "address": {
//       "street": "Victor Plains",
//       "suite": "Suite 879",
//       "city": "Wisokyburgh",
//       "zipcode": "90566-7771",
//       "geo": {
//         "lat": "-43.9509",
//         "lng": "-34.4618"
//       }
//     },
//     "phone": "010-692-6593 x09125",
//     "website": "anastasia.net",
//     "company": {
//       "name": "Deckow-Crist",
//       "catchPhrase": "Proactive didactic contingency",
//       "bs": "synergize scalable supply-chains"
//     }
// }

2.显示用户列表

该示例几乎与前一个示例相同，只是查询字符串是/users，而不是/users/2。
例子

fetch('https://jsonplaceholder.typicode.com/users')
	.then(response => response.json()) //定义返回的类型和数据格式
	.then(data => console.log(data)) // 返回的数据
// 数据示例：
// [
//     {
//       "id": 1,
//       "name": "Leanne Graham",
//       "username": "Bret",
//       "email": "Sincere@april.biz",
//       "address": {
//         "street": "Kulas Light",
//         "suite": "Apt. 556",
//         "city": "Gwenborough",
//         "zipcode": "92998-3874",
//         "geo": {
//           "lat": "-37.3159",
//           "lng": "81.1496"
//         }
//       },
//       "phone": "1-770-736-8031 x56442",
//       "website": "hildegard.org",
//       "company": {
//         "name": "Romaguera-Crona",
//         "catchPhrase": "Multi-layered client-server neural-net",
//         "bs": "harness real-time e-markets"
//       }
//     }
// 更多...
// ]

3.创建新用户

这个看起来与前面的例子有点不同。如果熟悉HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT。这些方法是简单描述要执行的操作类型的动词，主要用于操作服务器上的资源/数据。
无论如何，为了使用Fetch API创建新用户，我们需要使用HTTP谓词POST。但首先，我们需要在某处定义它。幸运的是，Init我们可以传递一个可选参数，用于定义自定义设置的URL，例如方法类型，正文，凭据，标题等。
例子

fetch('https://jsonplaceholder.typicode.com/users',{
	method: 'POST',
  	body: JSON.strignify({
    	username: '张三',
      	email: 'elonasdfk@gmail.com',
	    userId: 1
    }),
  	headers: { 'Content-Type': 'application/json;charset=utf-8'}
})

4.删除用户

为了删除用户，我们首先需要定位用户/users/1，然后我们定义方法类型DELETE。
例子

fetch('https://jsonplaceholder.typicode.com/users/1',{
	methods: 'DELETE'
})

5.更新用户

HTTP谓词PUT用于操作目标资源，如果要进行部分更改，则需要使用PATCH。
例子

fetch('https://jsonplaceholder.typicode.com/users',{
	method: 'PUT',
  	body: JSON.strignify({
    	username: '张三',
      	email: 'elonasdfk@gmail.com',
	    userId: 1
    }),
  	headers: { 'Content-Type': 'application/json;charset=utf-8'}
})

结论

现在，你已基本了解如何使用JavaScript的Fetch API从服务器检索或操作资源，以及如何处理promise。您可以使用本文作为如何构建CRUD操作的API请求的指南。
就个人而言，我觉得Fetch API是声明性的，就算没有任何技术编码经验，你也可以很容易地理解发生了什么。

参考：
https://juejin.im/post/5a60031f6fb9a01cb0495d1d
https://juejin.im/post/5beb8eefe51d450f9461c481

One-Direction

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fetch

前言The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and...
复制链接

扫一扫