区块链扩展技术>> http-ajax-axios>> 返回
项目作者： cheungww

项目描述 ：
axios的示例代码
高级语言： HTML
项目地址: git://github.com/cheungww/http-ajax-axios.git
创建时间： 2020-01-15T18:08:48Z
项目社区：https://github.com/cheungww/http-ajax-axios
开源协议：
下载


axios从入门到源码分析

1. 前后台交互的基本过程

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

2. HTTP请求报文

  1. 1. 请求行: 请求方式/url
  2. 2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头
  3. 3. 请求体

3. HTTP响应报文

  1. 1. 响应行: 响应状态码/对应的文本
  2. 2. 多个响应头: 如 Content-Type / Set-Cookie 头
  3. 3. 响应体

4. post请求体文本参数格式

  1. 1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
  2.     用于键值对参数，参数的键值用=连接, 参数之间用&连接
  3.     例如: name=%E5%B0%8F%E6%98%8E&age=12
  4. 2. Content-Type: application/json;charset=utf-8
  5.     用于json字符串参数
  6.     例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}

5. 常见响应状态码

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

6. 不同类型的请求及其作用:

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

7. API的分类

  1. 1. REST API:    restful
  2.     发送请求进行CRUD哪个操作由请求方式来决定
  3.     同一个请求路径可以进行多个操作
  4.     请求方式会用到GET/POST/PUT/DELETE
  5. 2. 非REST API:   restless
  6.     请求方式不决定请求的CRUD操作
  7.     一个请求路径只对应一个操作
  8.     一般只有GET/POST
  9. 测试: 可以使用json-server快速搭建模拟的rest api 接口

8. 理解XHR

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

9. 区别ajax请求与一般HTTP请求

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

10. 使用XHR封装一个发ajax请求的通用函数

  1. 函数的返回值为promise, 成功的结果为response, 异常的结果为error
  2. 能处理多种类型的请求: GET/POST/PUT/DELETE
  3. 函数的参数为一个配置对象: url/method/params/data
  4. 响应json数据自动解析为了js

11. axios的特点

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

12. axios常用语法

  1. axios(config): 通用/最本质的发任意类型请求的方式
  2. axios(url[, config]): 可以只指定url发get请求
  3. axios.request(config): 等同于axios(config)
  4. axios.get(url[, config]): 发get请求
  5. axios.delete(url[, config]): 发delete请求
  6. axios.post(url[, data, config]): 发post请求
  7. axios.put(url[, data, config]): 发put请求
  9. axios.defaults.xxx: 请求的默认全局配置
  10. axios.interceptors.request.use(): 添加请求拦截器
  11. axios.interceptors.response.use(): 添加响应拦截器
  13. axios.create([config]): 创建一个新的axios(它没有下面的功能)
  15. axios.Cancel(): 用于创建取消请求的错误对象
  16. axios.CancelToken(): 用于创建取消请求的token对象
  17. axios.isCancel(): 是否是一个取消请求的错误
  18. axios.all(promises): 用于批量执行多个异步请求
  19. axios.spread(): 用来指定接收所有成功数据的回调函数的方法

13. 源码难点与流程分析

  1. 1. axios与Axios的关系
  2.     axios函数对应的是Axios.prototype.request方法通过bind(Axiox的实例)产生的函数
  3.     axios有Axios原型上的所有发特定类型请求的方法: get()/post()/put()/delete()
  4.     axios有Axios的实例上的所有属性: defaults/interceptors
  5.     后面又添加了create()/CancelToken()/all()
  6. 2. axios.create()返回的对象与axios的区别
  7.     1). 相同: 
  8.         都是一个能发任意请求的函数: request(config)
  9.         都有发特定请求的各种方法: get()/post()/put()/delete()
  10.         都有默认配置和拦截器的属性: defaults/interceptors
  11.     2). 不同:
  12.         默认匹配的值不一样
  13.         instance没有axios后面添加的一引起方法: create()/CancelToken()/all()
  14. 3. axios发请求的流程
  15.     1). 整体流程: request(config)  ===> dispatchRequest(config) ===> xhrAdapter(config)
  16.     2). request(config): 将请求拦截器 / dispatchRequest() / 响应拦截器 通过promise链串连起来, 返回promise
  17.     3). dispatchRequest(config): 转换请求数据 ===> 调用xhrAdapter()发请求 ===> 请求返回后转换响应数据. 返回promise
  18.     4). xhrAdapter(config): 创建XHR对象, 根据config进行相应设置, 发送特定请求, 并接收响应数据, 返回promise 
  19. 4. axios的请求/响应拦截器是什么?
  20.     1). 请求拦截器: 在真正发请求前, 可以对请求进行检查或配置进行特定处理的函数, 
  21.                包括成功/失败的函数, 传递的必须是config
  22.     2). 响应拦截器: 在请求返回后, 可以对响应数据进行特定处理的函数,
  23.                包括成功/失败的函数, 传递的默认是response
  24. 5. axios的请求/响应数据转换器是什么?
  25.     1). 请求转换器: 对请求头和请求体数据进行特定处理的函数
  26.         setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
  27.         return JSON.stringify(data)
  28.     2). 响应转换器: 将响应体json字符串解析为js对象或数组的函数
  29.         response.data = JSON.parse(response.data)
  30. 6. response的整体结构
  31.     {
  32.         data,
  33.         status,
  34.         statusText,
  35.         headers,
  36.         config,
  37.         request
  38.     }
  39. 7. error的整体结构
  40.     {
  41.         message,
  42.         request,
  43.         response
  44.     }
  45. 8. 如何取消未完成的请求
  46.     1).当配置了cancelToken对象时, 保存cancel函数
  47.         创建一个用于将来中断请求的cancelPromise
  48.         并定义了一个用于取消请求的cancel函数
  49.         将cancel函数传递出来
  50.     2.调用cancel()取消请求
  51.         执行cacel函数, 传入错误信息message
  52.         内部会让cancelPromise变为成功, 且成功的值为一个Cancel对象
  53.         在cancelPromise的成功回调中中断请求, 并让发请求的proimse失败, 失败的reason为Cacel对象