vue 中 axios 使用

2022-07-10 08:46:03

前言

在对接接口的时候时常会有传参问题调调试试很多，是 JSON、From Data还是 URL 传参，没有搞清楚就浪费很多时间。

本文中就结合 axios 来说明这些的区别，以便在以后工作更好对接。

一、传参区别

在 axios 的源码中对参数的处理分为两类，一类是：get、delete 等，一类是：post、put 等。

// 路径：node_modules\axios\lib\core\Axios.js

utils.forEach([‘delete‘, ‘get‘, ‘head‘, ‘options‘], function forEachMethodNoData(method) {
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach([‘post‘, ‘put‘, ‘patch‘], function forEachMethodWithData(method) {
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

上面的代码在（node_modules\axios\lib\core\Axios.js），从上面可以看出来，get 等在这里是没有参数的，post 等是 data 参数。

1、这里的 get 的参数怎么没有了呢？

在这个地方，get 的参数 params 已经拼接到了 URL 上面，是在初始化 request config 的时候就已经拼接。

// 路径：node_modules\axios\lib\core\Axios.js

config = utils.merge(defaults, {method: ‘get‘}, this.defaults, config);

// 路径：node_modules\axios\lib\defaults.js

adapter: getDefaultAdapter()

function getDefaultAdapter() {

var adapter;

if (typeof XMLHttpRequest !== ‘undefined‘) {

// For browsers use XHR adapter

adapter = require(‘./adapters/xhr‘);

} else if (typeof process !== ‘undefined‘) {

// For node use HTTP adapter

adapter = require(‘./adapters/http‘);

}

return adapter;

}

// 路径：node_modules\axios\lib\adapters\http.js

 var options = {
      path: buildURL(parsed.path, config.params, config.paramsSerializer).replace(/^\?/, ‘‘),
      method: config.method,
      headers: headers,
      agent: agent,
      auth: auth
    };

上面的代码是截取自源码中的，最后一段代码就是把 params 拼接到 URL 中。

二、post 传参和 Content Type

在这里拿 post 请求作为示例，看一看是怎么处理 data 数据的。

1、post 默认 Content Type

从源码中可以看出，默认的 Content Type 是：application/x-www-form-urlencoded

// 路径：node_modules\axios\lib\defaults.js

var DEFAULT_CONTENT_TYPE = {
  ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
};

utils.forEach([‘post‘, ‘put‘, ‘patch‘], function forEachMethodWithData(method) {
  defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});

所以在不指定的时候，是用 FromData 传参。

2、data 处理

data 的处理过程中会影响 Content Type 。

根据 data 的不同类型，处理也不一样。

// 路径：node_modules\axios\lib\defaults.js

transformRequest: [function transformRequest(data, headers) {
    normalizeHeaderName(headers, ‘Content-Type‘);
    if (utils.isFormData(data) ||
      utils.isArrayBuffer(data) ||
      utils.isBuffer(data) ||
      utils.isStream(data) ||
      utils.isFile(data) ||
      utils.isBlob(data)
    ) {
      return data;
    }
    if (utils.isArrayBufferView(data)) {
      return data.buffer;
    }
    if (utils.isURLSearchParams(data)) {
      setContentTypeIfUnset(headers, ‘application/x-www-form-urlencoded;charset=utf-8‘);
      return data.toString();
    }
    if (utils.isObject(data)) {
      setContentTypeIfUnset(headers, ‘application/json;charset=utf-8‘);
      return JSON.stringify(data);
    }
    return data;
  }],

上面是源码中对 data 的转换；

有两个特殊处理的类型，URLSearchParams 和 Object，这两个特殊处理会修改 Content Type。

所以有时候，post 请求传的是 params 也是可以，这是因为接口也支持这种传参，没有限定使用 body。

当 data 是 Object 的时候，会把参数格式化为 JSON 字符串。

总结

1、从上面可以看出来，在使用 JSON 传参的时候，直接传一个对象就可以，不用做任何的操作，axios 都在内部做了（现在看来在外面再格式化是多此一举）。

要使用 FormData 的时候，可以单独对数据处理：

      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }

再传入 data ，这样里面也不会做处理了，直接返回就可以用，而且 Content Type 也和默认的匹配。

2、要在 get 中传 Object 怎么办？

这个在上一篇文章有说，现在再回头看看，用 post 也可以达到目的。

既然为对 post get 做了区别对待，这样随意乱用不太好，还是 paramsSerializer 更合理。

vue 中 axios 使用

码农公寓

前言

一、传参区别

二、post 传参和 Content Type

总结

相关文章