前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

今天讲什么？

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。

a.全局的 axios 默认值

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

b.实例默认值

// 创建实例时设置配置的默认值
  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 --看云