李侬

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


思否
前端培训 实战 HTTP JavaScript

转载自 SegmentFault

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

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

今天讲什么？

content-type 是什么

MIME 对照表

axios 为什么感觉不如 $.ajax

  • 带你领略 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 分类

type关键词 描述 示例

text 文本。复制粘贴的里面常见。

text/html html页面, text/css css文件,text/plain 通用文字（默认格式）

image 图片。input.files[0].type 返回的时候用于判断类型。input accept="image/*" 允许选择所有图片文件

image/png png图片, image/jpeg jpg图片

audio 音频。同上

audio/wav,audio/mpeg mp3文件

video 视频。同上

video/mp4 MP4文件

application 二进制数据

application/octet-stream 通用类型（默认格式），application/pdf

multipart 复合类型 multipart/form-data

常见 MIME

key 描述

application/octet-stream 默认值，或者可以理解为未知的应用程序文件。浏览器会像对待设置了 HTTP 头 Content-Disposition 值为 attachment 的文件一样来对待这类文件。（微信下载文件）

text/html 可以理解为 html、xml 文件。

text/plain 默认值，也可以理解为未知格式的文本文件。文本文件嘛，没格式就只看字也不是啥大问题

image/png 常见图片类型，一般上传图片的时候判断

image/jpeg 常见图片类型，一般上传图片的时候判断

image/gif 常见图片类型，一般上传图片的时候判断

multipart/byteranges 用于把部分的响应报文发送回浏览器。常见于请求视频资源返回206状态码

application/json JSON 格式

multipart/form-data 用于带文件上传的表单提交。作为多部分文档格式，由边界线（一个由’—‘开始的字符串）划分出的不同部分组成。每一部分有自己的实体，以及自己的 HTTP 请求头，Content-Disposition 和 Content-Type。

application/x-www-form-urlencoded

普通的 get&post 请求。数据被编码为键/值对。(a=1&b=2)这是标准的编码格式。

axios 为什么感觉不如 $.ajax

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

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

jquery 非常棒，他存在解决了各个浏览器版本不一致的问题，提供了统一的 api，极大的简化了我们的操作。

axios 拥抱现代浏览器，提供跨平台（Node发请求）、 Promise等。

get 请求

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

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

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

  • 手动拼写，兄弟也是虎的可以

qs、$.param({a:1,b:2}) 等类库解决处理问题，然后手动拼接

  • 正确答案（axios 是使用 params 来发送 get 的数据的）

post 请求

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

application/x-www-form-urlencoded 这种情况等于把 get 方式的参数拿到 请求体中存放。编译格式是一模一样的。

application/json 请求体中就是如下的JSON字符串{a:1,b:2}

multipart/form-data 请求体中就是这种块的结构。

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

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

后台大哥说收到了，嗯，post 也是 params的结论就出来了

  • 过几天另一个后台大哥说收不到。很奇怪，又开始揪头发。

  • 这里说一下为什么有的时候能收到，有的时候不行。首先 params 带过去的参数会拼写在 url 上。如果严格来按规定做的话，他就是拿body 的信息就导致拿不到。不按规定来，url的构建一次，body的覆盖一次，就导致拿到了。

  • 有的人比较机灵，换 params 发现不怎么好使，突然发现官网的例子，我来试一试。后台大哥怎么还收不到？这里其实 content-type 被改成了 application/json。一般来说老后台都不会适配这种格式。axios({method:‘post’}) 也是这种格式

  • 没办法了？嗯，他们又开始自己拼接。嗯，这次有混过去了

transformRequest 大法，我这个方法里面，给他处理一番。

FormData 大法好，精准识别，也算是正确的表单提交。

URLSearchParams 方案等同于 Qs 的类库，只不过是浏览器支持的，当然兼容性也不怎么样

带你领略 axios 正确打开方式

  • 使用 get 要用 params 来发送请求

使用 post 要用 data 来发送请求

默认为 application/json 格式

  • 可以通过 FormData 来进行修改

  • 更建议全局 transformRequest 的方案

axios 支持 Promise

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

axios 支持 Node 环境

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

全局的 axios 默认值

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

实例默认值

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

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

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

总结

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

参考资料

  • MIME 类型 —MDN

  • axios —看云

原文：SegmentFault

评论

评论功能即将开放。你也可以通过 邮件 或 GitHub Issue 反馈。