[学习笔记] 数据请求(一) --- Fetch

[学习笔记] 数据请求(一) — Fetch

认识Fetch

• 文档

  Fetch Web Api (MDN) — Fetch API - Web API 接口参考 | MDN (mozilla.org)

• 说明

  • Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。
  • Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。
  • 除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

在 vue 中简单使用 fetch

• 基础 get 请求

  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json()) // 获取结果并解析
    .then(json => console.log(json)) // 打印解析后数据
  

  返回结果：

  {
  	"userId": 1,
  	"id": 1,
  	"title": "delectus aut autem",
  	"completed": false
  }
  

• 配置 post 请求上传数据

  Ps: 使用 jsonplaceholder，资源不会在服务器上真正更新，但会被仿造。

所以：想展示上传数据后的数据，需要本地将返回结果 push 或者 unshift 到本地数组中

数据准备：

data: {
  "title": "William",
	"completed": true
}

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json()) // 获取结果并进行 json 解析
.catch(error => console.error('Error:', error)) // 获取失败时执行
.then(response => console.log('Success:', response)); // 将获解析后结果打印

headers 处可简写：

​ headers: {
​ ‘Content-Type’: ‘application/json’

​ }

返回结果：

{
	"id": 201,
  "title": "William",
	"completed": true
}