前端培训初级阶段场景实战20190606ContentType对照表及日常使用

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

axios 日常使用上，感觉不如 $.ajax 但是我之前使用的时候不是改入参就是改方法反正是都解决了。
我也知道问题出在 content-type 上。
就是记不住，这不前几天后台项目起了个新的服务。
之前用的构建开发工具用的是 proxy 代理，不知道有老哥用过没，好几年前初次开发的时候就不更新了，还有 bug。
索性换 axios 代理一下吧，然后报错了。好吧，我的锅，我认真总结，保证 我不忘了。

今天讲什么？

1. content-type 是什么
2. MIME 对照表
3. axios 为什么感觉不如 $.ajax
4. 带你领略 axios 正确打开方式

content-type 是什么

Content-Type 实体头部用于指示资源的 MIME类型 media type。
在响应中，用来描述服务端实际发送给客户端的 数据的类型 。
在请求中，比如 POST请求，是指客户端给服务器实际发送的 数据的类型 。
双方根据这个值，来选择适合的方式解析数据。

MIME 类型组成方式

type/subtype，如 application/json、text/html、text/plain
对大小写不敏感 ，但是习惯写 小写。

content-type 组成方式

Content-Type:media-type; charset，如Content-Type: text/html; charset=utf-8

表单中的应用

<form action="/" method="post" enctype="multipart/form-data"> 想上传文件的时候
<form action="/" method="post" enctype="application/x-www-form-urlencoded"> 默认
为什么想上传文件不能用第二个呢？带着你的问题往后看吧

MIME 对照表

Media Types - 全量的对照表

MIME 分类

常见 MIME

axios 为什么感觉不如 $.ajax

（同样代码 jquery 好使，axios 不好使，axios 有 bug 吧）- 这个应该是我听到最多的吐槽了。测试地址

axios 与 $.ajax 设计思路、或者说历史场景

1. jquery 非常棒，他存在解决了各个浏览器版本不一致的问题，提供了统一的 api，极大的简化了我们的操作。
2. axios 拥抱现代浏览器，提供跨平台（Node 发请求）、Promise等。

get 请求

对于 get 请求其实没有太多说的，请求的参数会拼在 url 上，如 https://www.lilnong.top/CORS/lnong?a=1&b=2，其中 a=1&b=2 就是带过去的参数

同样两个使用，我们会发现 axios 的没有带过去参数。


这个时候兄弟们就开始说，我写了为什么传不过去。垃圾垃圾。针对上面的问题兄弟们骂完之后，还是要解决问题的。

1. 手动拼写，兄弟也是虎的可以
   
2. qs、$.param({a:1,b:2}) 等类库解决处理问题，然后手动拼接
3. 正确答案（axios 是使用 params 来发送 get 的数据的）
   

post 请求

对于 post 请求来说就有好几种情况了

1. application/x-www-form-urlencoded 这种情况等于把 get 方式的参数拿到 请求体中存放。编译格式是一模一样的。
2. application/json 请求体中就是如下的 JSON 字符串{a:1,b:2}
3. multipart/form-data 请求体中就是这种块的结构。
   

好，那我们接着看兄弟们为什么要吐槽。同样，我 ajax 怎么好使，axios ****

1. data 不行，我们换 params，嗯这里其实分为两个情况

   1. 后台大哥说收到了，嗯，post 也是 params 的结论就出来了
   2. 过几天另一个后台大哥说收不到。很奇怪，又开始揪头发。
   3. 这里说一下为什么有的时候能收到，有的时候不行。首先 params 带过去的参数会拼写在 url 上。如果严格来按规定做的话，他就是拿 body 的信息就导致拿不到。不按规定来，url 的构建一次，body 的覆盖一次，就导致拿到了。
2. 有的人比较机灵，换 params 发现不怎么好使，突然发现官网的例子，我来试一试。后台大哥怎么还收不到？这里其实 content-type 被改成了 application/json。一般来说老后台都不会适配这种格式。axios({method:’post’}) 也是这种格式
   
3. 没办法了？嗯，他们又开始自己拼接。嗯，这次有混过去了
   
4. transformRequest 大法，我这个方法里面，给他处理一番。
   
5. FormData 大法好，精准识别，也算是正确的表单提交。
   
6. URLSearchParams 方案等同于 Qs 的类库，只不过是浏览器支持的，当然 兼容性也不怎么样
   

带你领略 axios 正确打开方式

1. 使用 get 要用 params 来发送请求

2. 使用 post 要用 data 来发送请求

   1. 默认为 application/json 格式
   2. 可以通过 FormData 来进行修改
   3. 更建议全局 transformRequest 的方案

3. axios 支持 Promise

   axios.get('/user?ID=12345')
     .then(function (response) {console.log(response);
     })
     .catch(function (error) {console.log(error);
     });

4. axios 支持 Node 环境

5. 配置默认值，方案 1 更痛快，可以增加一些通用的 headers。

   1. 全局的 axios 默认值

        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

   2. 实例默认值

        // 创建实例时设置配置的默认值
        var instance = axios.create({baseURL: 'https://api.example.com'});
        
        // 在实例已创建后修改默认值
        instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

6. 拦截器，可以拦截错误，进行上报。或者打印日志。

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

总结

content-type 很重要，在 req 中是告知服务器应该用什么样的格式去解析数据，rsp 中是让浏览器端去如何解析数据。
根据对应的类型，传对应的格式，才可以正确的收发。

参考资料

1. MIME 类型 –MDN
2. axios – 看云