axios持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情 1 . 表单提交

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1 . 表单提交数据

表单的作用

表单主要负责采集数据

表单的组成

网页中采集数据的表单由三个部分组成 :

表单标签（form）: 在页面上划定为表单区域
表单域（input、textarea、select）: 用户输入信息,并采集
- 注意： 每个表单域必须包含 name 属性，否则用户输入的信息无法被采集
表单按钮（submit）: 用户点击表单按钮，会触发表单的提交操作，把采集到的数据提交给服务器。

`<form>` 表单标签的常用属性

表单标签最重要的 3 个属性分别是 action、method 和 enctype

action = "接口的 url 地址" : 把表单采集到的数据，提交到哪儿
method = "请求方式(GET、POST)" : 数据的请求方式（默认值为 GET）
enctype = "数据的编码格式" : 把表单数据提交给服务器之前，如何对将要提交的数据进行编码（默认值 application/x-www-form-urlencoded）

注意：

enctype 属性只能搭配 POST 提交方式一起使用
如果是 GET 提交，则 enctype 没有意义

    <form 
    action="https://www.juejin.cn:443/api/form" 
    method="POST" 
    enctype="application/x-www-form-urlencoded">
        用户名: <input type="text" name="username"> <br><br>
        密&emsp;码: <input type="text" name="password"> <br><br>
        <input type="submit">
    </form>    
复制代码

`enctype` 三个可选值之间的区别

只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。

application/x-www-form-urlencoded : 适用于普通数据的提交,不包含文件上传
multipart/form-data : 上传文件
text/plain : 不常用

3 . axios 拦截器的用法

1 . 什么是 axios 拦截器

拦截器（interceptors） : 用来全局拦截 axios 的每一次请求与响应。

好处： 可以把每个请求中，重复的业务代码封装到拦截器中，提高代码的复用性。

axios 拦截器有两种 : 请求拦截器和响应拦截器

2 . axios 请求拦截器

就是在 axios 发送请求前做点什么

    // 请求拦截器 - 发送请求之后
    axios.interceptors.request.use(function (config) {
      // 在这里可以进行请求前做什么的操作
      
      // config里面存储的是所有请求的参数，使用完毕后，一定要返回
      return config;
    }, function (error) {
      // 固定写法
      return Promise.reject(error);
    })
复制代码

3 . 请求拦截器的业务场景

全局配置请求根路径

在 url 地址中，协议://域名:端口 对应的部分叫做 “请求根路径”。
全局配置请求根路径的好处： 提高项目的可维护性(假设：端口号发生改变，则每个接口调用时的端口号都需要被修改)。

语法 :

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

axios