浅谈axios

1. 预备知识

1.1 前后台交互的基本过程

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

1.2 HTTP请求报文

一个HTTP请求报文由3个部分组成：请求行、多个请求头、请求体。
例如： GET /index.html HTTP/1.1

1. 请求行：
   ①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。
   ②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL。
   ③是协议名称及版本号。

2. 请求头：
   HTTP的报文头，报文头包含若干个属性，一个请求头格式为“属性名:属性值”, 如Host/Cookie/Content-Type头。
   服务端据此获取客户端的信息，与缓存相关的规则信息，均包含在header中

请求体：
它将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。

1.3 HTTP响应报文

1. 响应行:
   ①报文协议及版本；
   ②响应状态码/对应的文本

2. 多个响应头: 如 Content-Type / Set-Cookie 头

3. 响应体： 所要的数据。

1.4 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}

1.5 常见响应状态码

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

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

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

2. 什么是axios?

前端最流行的ajax请求库.

文档：http://www.axios-js.com/zh-cn/docs/

2.1 axios的特点

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

2.2区别ajax请求与一般HTTP请求

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

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

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

3 axios的理解和使用

3.1 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(): 用来指定接收所有成功数据的回调函数的方法

3.2 axios.create(config)

a ) 根据指定配置创建一个新的axios, 也就就每个新axios 都有自己的配置。

b ) 新axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?

     (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
样, 如何处理

    (2) 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要
求的接口请求中

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

• 说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程

• 流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求=> 响应拦截器1 => 响
  应拦截器2 => 请求的回调

• 注意: 此流程是通过promise 串连起来的, 请求拦截器传递的是config, 响应
  拦截器传递的是response

3.3取消请求

1. 基本流程
   1 ) 配置cancelToken 对象
   2 ) 缓存用于取消请求的cancel 函数
   3 ) 在后面特定时机调用cancel 函数取消请求
   4 ) 在错误回调中判断如果error 是cancel, 做相应处理