【Ajax ，Axios的应用】

1.客户端与服务器

本章节讲解: 客户端、服务器、客户端与服务器通信的过程、URL 地址与资源。

1.1 客户端

在前端开发中，客户端特指“Web 浏览器”。实际开发中，只要可以访问服务器的一端都属于客户端（手机、平板、电脑中的各种软件都可以是客户端）。

1.2 服务器

概念：服务器是提供服务的设备。
​ 作用：在上网过程中，服务器专门负责存放资源和对外提供服务。

1.3 客户端与服务器通信的过程

客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：

• 请求的概念：客户端通过网络去找服务器要资源的过程，叫做 “请求”
• 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做 “响应”

1.4 URL 地址

一个完整的url地址分为: 协议、域名(IP地址)、端口、资源存放路径。

• 协议：协议是用来规范网络通讯中数据的格式。常见: http 和 https
• 域名：电脑主机网络中存放的位置，主机地址的唯一标识。域名就是 给 IP 地址起个名字，方便记忆。
• 端口：电脑与外界通讯交流的出口，为数字类型，取值范围 0~65535 之间。其中80为http专用。
• 资源存放路径：资源存放路径就是资源在服务器中的具体存放地址。

1.5 资源

​ 服务器对外提供的所有内容都属于资源。

​ 网页中的数据，也是服务器对外提供的一种资源。数据是网页的灵魂！

​ 获取数据需要用到的技术：Ajax！

2.axios 的使用

	本章节讲解: Ajax的概念、Ajax的五种请求方法、axios的GET请求、URL编码、Ajax的解构赋值、Ajax的POST请求、请求报文和响应报文。

2.1 Ajax的概念

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

2.2 Ajax的五种请求方法

POST:向服务器新增数据
GET：向服务器请求数据
DELETE：删除服务器上的数据
PUT：更新服务器上的数据（侧重于完整更新：例如更新新用户的完整信息）
PATCH：更新服务器上的数据（侧重部分数据的更新，例如只更新用户的手机号）

2.3 axios的GET请求

axios({
      method: '请求的类型',
      url: '请求的URL地址',
      params: {id: 1, bookname: '红楼梦'} // params用于传递参数，可选
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

注意: GET参数的本质就是把参数用 & 符号链接起来放到路径的最末尾用 ？分隔。
例如：http://www.liyilong.top:3006/getbooks?id=1&bookname=红楼梦

2.4 URL编码

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理

​ 浏览器内置了 encodeURIComponent() 和 decodeURIComponent() 两个方法，用来实现 URL 的编码和解码处理

2.5 Ajax的解构赋值

	axios收到的数据，是经过axios封装之后的所以，res是一个对象，最重要的数据为 data 属性，其他属性很少使用，所以可以通过对象解构的方式把最常用的属性解构出来，其他的暂时可以不用理会：

axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3009/api/getbooks'
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

2.6 Ajax的POST请求

	POST请求和GET请求不一样，POST请求一定会伴随着请求参数，因为如果没有参数，我们就不必使用POST请求了，且POST请求的功能就是推送数据: 

axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3009/api/addbook',
  data: { bookname: '三体', author: '刘慈欣', publisher: '北京人民出版社' }
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

3，接口文档

接口的概念、接口文档的格式、POSTMAN、

3.1 接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。

3.2 接口文档的格式

接口文档的格式有很多，txt，word，excel，md等....  现在最常用的是 html 格式文档。
线上地址，接口文档：https://www.showdoc.com.cn/ajaxapi/3753323218792173

3.3 POSTMAN

接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试，从而检查接口能否被正常访问。