vue axios数据请求的两种请求头，一种是JSON序列化对象，一种是formData,这两种格式的处理方式

爱被打了一巴掌 2021-07-26 02:17 990阅读 0赞

#### 请求头与响应头的查看 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
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`请求如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
`POST`请求如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
无论是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 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)
      }
    )

控制台展示情况如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
多多积累，终成大神。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/c3390f04a89e4aaea0ca1a5d1d61af2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/1440438df1ac41daab875aa1079ad078.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/56093c06551441efae36526a4a55bbde.png
[axois]: http://www.axios-js.com/zh-cn/docs/#axios-get-url-config-1
[axios formdata]: http://www.axios-js.com/zh-cn/docs/#%E4%BD%BF%E7%94%A8-application-x-www-form-urlencoded-format
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/24ba23394dcc4718abc26a91c74ee8af.png