使用Fetch API 实现学生信息的CRUD操作(4)---Fetch Api实战

背景

接着上一节，把Fetch Api 用起来。

预备知识

如果本节有些细节概念看上去有些吃力(尤其是promise)，可以看一下:

• 同步和异步
• promises对象
• 回调函数
• postman的使用
• json-server

什么是Fetch API

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。（取代传统的XMLHttpRequest的） 这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。 Fetch 还利用到了请求的异步特性——它是基于Promise的。

简单说就是取代了Ajax，用来获取后台数据

为什么要使用Fetch API

传统的XMLHttpRequest请求闲的非常的杂乱，而优雅的ajax又不得不额外加载jQuery这个80K左右的框架 那么Fetch API就应势而生，提供了一种新规范，用来取代善不完美的 XMLHttpRequest 对象

浏览器发送HTTP请求：

• 当用户在浏览器的地址栏中输入一个URL地址并按回车键之后，浏览器会向HTTP服务器发送HTTP请求。 当我们在浏览器输入URL http://www.baidu.com 的时候，浏览器发送一个Request请求去获取 http://www.baidu.com
  的html文件，服务器把Response文件对象发送回给浏览器。
• 浏览器分析Response中的 HTML，发现其中引用了很多其他文件，比如Images文件，CSS文件，JS文件。 浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件等。
• 当所有的文件都下载成功后，网页会根据HTML语法结构，完整的显示出来了。

如何使用

基础语法

fetch(url) // 调用fetch函数，将API的url作为参数传递
.then(function() {
   
    // 处理从API获取的数据
})
.catch(function() {
   
    // 如理服务器返回任何错误
});

创建本地数据库

创建db.json,使用json-server
启动起来

{
   
  "contacts3": [
    {
   
      "name": "FFF",
      "email": "2656593403@qq.com2",
      "contactno": "111111130",
      "id": 9
    },
    {
   
      "name": "PPP",
      "email": "asd@qq.com2",
      "contactno": "114130",
      "id": 10
    },
    {
   
      "name": "vvvvv",
      "email": "2656593403@qq.com2",
      "contactno": "111111130",
      "id": 99
    }
  ]
}

get 获取数据

需要指明是get请求

1. 安装node-fetch

   npm i node-fetch --save
   

2. test.js

   const fetch = require("node-fetch");
   fetch