请求头与响应头的查看
PC端，发送请求后，点击控制台中的Network中的请求链接，此时为了筛选请求链接，可以点击XHR.
打开请求链接后，在Headers中可以看到Response Headers响应头和Request Headers请求头。
无论是请求头和响应头，都有对应的数据格式，也就是content-type.
最近工作中，遇到了两种不同的请求格式，这两种格式的处理方式也是不同的。
content-type:‘application/json;charset=UTF-8’
content-type:'application/json;charset=UTF-8'这种是最常见的一种数据请求格式，我之前遇到的都是这样的。
这种数据格式是：axios将JavaScript对象序列化为JSON 在控制台中展示的形式如下：
GET请求如下图：
POST请求如下图：
无论是get还是post请求，都可以直接使用axios中的get和post方法进行数据发送。
参照axois中的操作链接：
axois 简单的写法如下：
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象可被使用， 也就是说，如果要catch错误消息，可以使用 axios.get(url).then(res=>{成功函数执行}).catch(error=>{错误接收处理})
“Content-Type”:‘application/x-www-form-urlencoded’
"Content-Type":'application/x-www-form-urlencoded'这种数据格式，是不能用上面的方式直接处理的。
axios中针对这种数据formdata数据，有详细的说明：
axios formdata数据格式处理以下部分内容摘自axios
使用 application/x-www-form-urlencoded format
默认情况下，axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。
浏览器
在浏览器中，您可以使用URLSearchParams API，如下所示：
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意，所有浏览器都不支持URLSearchParams（请参阅caniuse.com），但可以使用polyfill（确保填充全局环境）。
或者，您可以使用qs库编码数据：
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者以另一种方式（ES6），
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);我使用的过程中，用的是qs库的方式：
使用方法如下:
1.安装: 控制台 npm install qs 等待安装完成即可
2.引入并使用const qs = require('qs');axios.post('/foo', qs.stringify({ 'bar': 123 })); 代码贴图如下：
import axios from 'axios' //引入axios
import router from '@/router/routers' //引入router路由
import { Notification, MessageBox } from 'element-ui' //引入element-ui中的弹窗和提示窗组件
import store from '../store' //引入vuex中的store
import { getToken } from '@/utils/auth' //引入getToken方法，获取token值
import Config from '@/settings' //引入配置文件
var qs = require('qs')
//axios的使用就是 创建axios request拦截器
// 创建axios实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
timeout: Config.timeout // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
//此处以下为重点
//headers中的content-type 默认的大多数情况是 application/json，就是json序列化的格式
config.headers['Content-Type'] = 'application/json'
//为了判断是否为formdata格式，增加了一个变量为type,如果type存在，而且是form的话，则代表是formData的格式
if (config.type && config.type === 'form') {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
//data是接收的数据，接收的数据需要通过qs编码才可以直接使用
if (config.data) {
config.data = qs.stringify(config.data)
}
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)控制台展示情况如下：
多多积累，终成大神。
