序

前端最流行的ajax请求库

HTTP

• MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

HTTP 请求交互的基本过程

1. 前后应用从浏览器端向服务器发送 HTTP 请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回 HTTP
   响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

HTTP 请求报文

请求行

• method
• url

请求头

• Host: www.baidu.com主机
• Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
  • Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器
• Content-Type: application/x-www-form-urlencoded 或者 application/json
  • 告诉服务器请求体内容的类型

请求体

• urlencoded格式：username=tom&pwd=123
• JSON格式：{“username”: “tom”, “pwd”: 123}

HTTP 响应报文

1. 响应状态行
   • status statusText状态码
2. 多个响应头
   • Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
3. 响应体
   • html 文本/json 文本/js/css/图片…

post 请求体参数格式

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
   • 用于键值对参数，参数的键值用=连接, 参数之间用&连接
   • 例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
   • 用于 json 字符串参数
   • 例如: {“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12}
3. Content-Type: multipart/form-data
   • 用于文件上传请求

常见的响应状态码

状态码	提示信息	含义
200	OK	请求成功。一般用于 GET 与 POST 请求
201	Created	已创建。成功请求并创建了新的资源
401	Unauthorized	未授权/请求要求用户的身份认证
404	Not Found	服务器无法根据客户端的请求找到资源
500	Internal Server Error	服务器内部错误，无法完成请求

不同类型的请求及其作用

1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经有的数据
4. DELETE: 删除服务器端数据

API 的分类

1. REST API:restful
   • 发送请求进行 CRUD 哪个操作由请求方式来决定
   • 同一个请求路径可以进行多个操作
   • 请求方式会用到 GET/POST/PUT/DELETE
2. 非 REST API:restless
   • 请求方式不决定请求的 CRUD 操作
   • 一个请求路径只对应一个操作
   • 一般只有 GET/POST

使用 json-server 搭建 REST API

json-server 是什么?

• 用来快速搭建 REST API 的工具包

使用 json-server

1. 在线文档: https://github.com/typicode/json-server
2. 下载: npm install -g json-server
3. 目标根目录下创建数据库 json 文件: db.json

   JSON数据：
   
   {
   "posts": [
   { "id": 1, "title": "json-server", "author": "typicode" }
   ],
   "comments": [
   { "id": 1, "body": "some comment", "postId": 1 }
   ],
   "profile": { "name": "typicode" }
   }

4. 启动服务器执行命令: json-server –watch db.json

使用浏览器访问测试

• http://localhost:3000/posts

• http://localhost:3000/posts/1

• 代码实现：https://github.com/XieYaXv6/Learn-axios/blob/master/01_restapi.html

XHR 的理解和使用

理解

1. 使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送 ajax 请求
2. 前端可以获取到数据，而无需让整个的页面刷新。
3. 这使得 Web 页面可以只更新页面的局部，而不影响用户的操作。

区别一般 http 请求与 ajax 请求

1. ajax 请求是一种特别的 http 请求
2. 对服务器端来说, 没有任何区别, 区别在浏览器端
3. 浏览器端发请求: 只有 XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求
4. 浏览器端接收到响应
   • 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/ 跳转页面
   • ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

API

1. XMLHttpRequest(): 创建 XHR 对象的构造函数
2. status: 响应状态码值, 比如 200, 404
3. statusText: 响应状态文本
4. readyState: 标识请求状态的只读属性
   • 初始
   • open()之后
   • send()之后
   • 请求中
   • 请求完成
5. onreadystatechange: 绑定 readyState 改变的监听
6. responseType: 指定响应数据类型, 如果是’json’, 得到响应后自动解析响应体数据
7. response: 响应体数据, 类型取决于 responseType 的指定
8. timeout: 指定请求超时时间, 默认为 0 代表没有限制
9. ontimeout: 绑定超时的监听
10. onerror: 绑定请求网络错误的监听
11. open(): 初始化一个请求, 参数为: (method, url[, async])
12. send(data): 发送请求
13. abort(): 中断请求
14. getResponseHeader(name): 获取指定名称的响应头值
15. getAllResponseHeaders(): 获取所有响应头组成的字符串
16. setRequestHeader(name, value): 设置请求头

XHR 的 ajax 封装(简单版 axios)

特点

1. 函数的返回值为 promise, 成功的结果为 response, 异常的结果为 error
2. 能处理多种类型的请求: GET/POST/PUT/DELETE
3. 函数的参数为一个配置对象

   {
   url: '',	// 请求地址
   method: '',		// 请求方式 GET/POST/PUT/DELETE params: {},	// GET/DELETE 请求的 query 参数data: {}, // POST 或 DELETE 请求的请求体参数
   }

4. 响应 json 数据自动解析为 js

• 代码实现：https://github.com/XieYaXv6/Learn-axios/blob/master/02_xhr.html

axios 的理解和使用

axios 是什么?

1. 前端最流行的 ajax 请求库
2. react/vue 官方都推荐使用 axios 发 ajax 请求
3. 文档: https://github.com/axios/axios

axios 特点

1. 基本 promise 的异步 ajax 请求库
2. 浏览器端/node 端都可以使用
3. 支持请求／响应拦截器
4. 支持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求

axios 常用语法

- axios(config): 通用/最本质的发任意类型请求的方式
- axios(url[, config]): 可以只指定 url 发 get 请求
- axios.request(config): 等 同 于 axios(config) 
- axios.get(url[, config]): 发 get 请求
- axios.delete(url[, config]): 发 delete 请求
- axios.post(url[, data, config]): 发 post 请求
- axios.put(url[, data, config]): 发 put 请求 

- axios.defaults.xxx: 请求的默认全局配置
- axios.interceptors.request.use(): 添加请求拦截器
- axios.interceptors.response.use(): 添加响应拦截器

- axios.create([config]): 创建一个新的 axios(它没有下面的功能)

- axios.Cancel(): 用于创建取消请求的错误对象
- axios.CancelToken(): 用于创建取消请求的 token 对象
- axios.isCancel(): 是否是一个取消请求的错误
- axios.all(promises): 用于批量执行多个异步请求
- axios.spread(): 用来指定接收所有成功数据的回调函数的方法

难点语法的理解和使用

axios.create(config)

1. 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
2. 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
3. 为什么要设计这个语法?
   • 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
   • 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

拦截器函数/ajax 请求/请求的回调函数的调用顺序

1. 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
2. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调
3. 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应拦截器传递的是 response

取消请求

1. 基本流程

• 配置 cancelToken 对象
• 缓存用于取消请求的 cancel 函数
• 在后面特定时机调用 cancel 函数取消请求
• 在错误回调中判断如果 error 是 cancel, 做相应处理

2. 实现功能

• 点击按钮, 取消某个正在请求中的请求
• 在请求一个接口前, 取消前面一个未完成的请求
• 可以用请求拦截器统一取消发送请求前未完成的请求，并且保存取消函数；用响应拦截器对结果统一处理

• 源码：https://github.com/XieYaXv6/Learn-axios