axios与form的关系form 表单表单的三个组成部分网页中采集数据的表单由三个部分组成，分别是：表单标签、表单

form 表单

表单的三个组成部分

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮

表单标签

HTML 的

就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：

表单域

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。

表单按钮

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器

form表单的作用是 采集数据

< form > 标签最重要的 3 个属性分别是 action、method 和 enctype

属性	可选值	说明
action	接口的 url 地址	把表单采集到的数据，提交到哪个接口中
method	GET 或 POST	数据的提交方式（默认值为 GET）

| enctype | application/x-www-form-urlencoded/multipart/form-data text/plain（很少用） | 数据的编码格式。具体指的是：把表单数据提交给服务器之前，如何对将要提交的数据进行编码（默认值 application/x-www-form-urlencoded） |

表单提交的问题

< form > 表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。

解决方案：

< form > 表单只负责采集数据；
Ajax 负责将数据提交到服务器。（符合：职能单一的原则）

通过 Ajax 提交表单数据

通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验

监听表单的 submit 提交事件
阻止默认提交行为
基于 axios 发起请求
指定请求方式、请求地址
指定请求体数据

axios 请求方法的别名

在实际开发中，常用的 5 种请求方式分别是： GET、POST、PUT、PATCH、DELETE

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios 全局配置和拦截器

在 url 地址中，协议://域名:端口对应的部分叫做“请求根路径”。

全局配置请求根路径的好处：

提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

假设：端口号从 3009 变成了 3006

没有全局配置根路径，则每个请求的URL中的端口号都需要被修改！
有全局配置根路径，则只需要修改全局配置即可

axios 全局配置 & 拦截器

全局配置

axios.defaults.baseURL = '请求根路径'

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

拦截器（interceptors） 用来全局拦截 axios 的每一次请求与响应。好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

FormData和文件上传

FormData 介绍

FormData 是一个浏览器对象。用于管理表单数据。
IE10+支持。
可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用
快速收集表单数据
并且可以将创建的FormData对象直接提交给接口。
典型应用场景：FormData + Ajax 技术实现文件上传的功能。

FormData基本使用方法

假设需要收集 ……
要求，每个表单元素都具有 name 属性

## 文件域补充

input标签的属性

文件域：
accept 属性：控制能够选择的文件类型，比如 accept="image/png,image/jpeg"
multiple 属性：控制是否可以多选文件

文件对象

面向对象中，讲过，JS中表示一个人，需要用到对象。
JS中表示一个文件，也需要用对象，也就是文件对象
文件对象，是本地文件的一个表示。
通俗的说，在 JavaScript 中，使用文件对象表示一个本地文件。
文件对象不需要自己创建，可以通过文件域获取得到
选择一个或多个文件
根据文件域，找到它的 files 属性。files属性是一个伪数组，里面包含了一个或多个文件对象。

请求报文 & 响应报文

客户端与服务器通信的过程是基于请求与响应的。

其中：

请求报文规定了客户端以什么格式把数据发送给服务器
响应报文规定了服务器以什么格式把数据响应给客户端

请求报文 - 格式

请求报文由请求行（request line）、请求头部（ header ）、空行和请求体 4 个部分组成。

注意：

在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。

在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。

URL参数

常用的5种请求方式，都可以在URL后面携带请求参数。
由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传
常用的请求参数有两种写法
- /api/xxx?参数=值&参数=值 （这种格式的字符串叫做查询字符串，
- 以这样的参数叫做查询参数） /api/xxx/值/值 （Restful 风格的接口用这种格式的参数）

请求体

除GET请求以外，其他4种常用的请求方式，都可以设置请求体。
请求体的大小没有限制，所以可以提交大量的数据
常用的请求体格式有如下三种：
- 参数=值&参数=值（查询字符串格式）
- '{ "id": 1, "name": "zs" }' （JSON格式）
- new FormData() （FormData对象格式）

常见的 http 响应状态码

状态码	状态码描述	说明
200	OK	请求成功。
201	Created	资源在服务器端已成功创建。
304	Not Modified	资源在客户端被缓存，响应体中不包含任何资源内容！
400	Bad Request	客户端的请求方式、或请求参数有误导致的请求失败！
401	Unauthorized	客户端的用户身份认证未通过，导致的此次请求失败！
404	Not Found	客户端请求的资源地址错误，导致服务器无法找到资源！
500	Internal Server Error	服务器内部错误，导致的本次请求失败！

axios与form的关系