协议（网络协议）

HTTP/HTTPS 协议

HTTP 实际上是个缩写，英文全称是：Hyper Text Transfer Protocol （超文本传输协议）。

最常用的网页（也叫web页）就是一种超文本的具体表现形式。HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer）协议是安全的，地址是经过了身份认证的，传输的数据经过了加密。

url

地址栏输入的地址，叫作 URL,也就是我们常说的网址.

协议类型与域名之间以 ://（固定写法）分隔。
路径（英文常称为 path）以单斜杠 / 开头，中间每层的分隔符也是单斜杠 / 。
- 路径相当于一层一层的文件夹。但要注意与 windows 的文件夹分隔符 \ 不要混淆了。
参数：
- 路径与参数之间用 ? 分隔。看到问号 ? 就知道后面的内容就是参数了。
- 多个参数之间用 & 分隔。
- 参数用"参数名=参数值"（key=value）的格式表示。

https://www.douban.com:443/gallery/topic/116390/?from=hot_topic_note\&sort=new

域名后的 :443 表示网站的端口号。HTTP 协议默认的端口号是 80 ，HTTPS 协议默认的端口号是 443 。默认的端口号在 URL 中是可以省略的，其它的端口号就必须要写明了。

路径的两种情况

1.相对路径

gallery/topic/116390/?from=hot_topic_note&sort=new

不是以斜杠 / 开头的路径，表示相对路径，

2.默认路径

没有输入路径时，表示请求网站的默认页面.

API+GET请求

API

API 全称 Application Programming Interface，应用程序接口，API 一般是指一些预先定义的函数，目的是可以为开发人员快速访问某一程序，而无需了解和访问源码，或理解它内部工作机制的细节.

API 可以快速调用某个程序。

API 只是提供纯粹的数据（7゜c），并不包含与展示相关的字体颜色、字体大小、位置等信息。

fetch调用API

API，本质上就是一个 URL。开头也是 http（或https），只是返回的内容有明显的区别，没有大量多余的字符。

API 返回的内容统称为数据,可以使用fetch方法来获取这部分数据。

复制代码

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-1-1'
)
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

fetch返回了一个promise对象

promise

Promise 是异步编程的一种解决方案,（

异步编程是一种编程模式，它**允许程序在执行某些操作时不必等待其完成，而是可以继续执行其他操作。**这种编程模式通常用于处理需要等待I/O操作（如读取文件、网络请求等）的情况，以提高程序的性能和响应速度。

在异步编程中，程序会发起一个异步操作，然后继续执行后续的代码，等待异步操作完成后再执行相应的回调函数或处理结果。这样可以避免程序在等待操作完成时被阻塞，提高了程序的并发性和响应能力。

常见的异步编程方式包括使用回调函数、Promise对象、async/await等。异步编程在现代的Web开发中被广泛应用，特别是在处理大量的网络请求和数据处理时，可以有效提高程序的性能和用户体验。

）Promise对象可以通过**.then触发回调函数** ，then中文意思下一步，也非常符合人的语义化习惯。

response.json()返回的也是一个 Promise 对象，所有后续可以继续使用.then触发后续回调。

GET请求

类似于数据请求的接口，一般称作GET接口。而fetch在不指定类型时，默认是发起GET请求。

GET参数请求

API 调用需要参数，我们只要把包含参数的完整的 URL 直接传入到方法中。

POST请求

提交数据至服务端进行增加、修改、删除等操作，都是 POST 操作。我们在网页上提交表单进行登录的场景就是典型的POST操作。

fetch - POST 操作

文档中搜索POST,需要添加参数method。

复制代码

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',
  {
    method: 'POST'
  }
)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

由于未提供账号与密码我们所得到是

复制代码

{
  "isSuccess": false
}

将密码与账号输入。

复制代码

// 把JSON数据序列化成字符串
const data = JSON.stringify({
  username: 'admin',
  password: '123456'
});

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',
  {
    method: 'POST',
    body: data,
    headers: {
      'content-type': 'application/json'
    }
  }
)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });