The cause of

  • Form submission data
api.post(`xxx`, {
	brandGoodId: undefined
	categoryName: "test41"
	coverImgUrl: "hello"
	description: undefined
})
Copy the code

The submitted data may be undefined but not processed by the back end and may be processed as a string and stored directly into the database, but this is probably not the desired result.

The results of

After testing, I found that although I submitted the above object, the data I finally saw in the network was as follows:

{
	categoryId: 5503
	categoryName: "test41"
	imgUrl: "hello"
}
Copy the code

It is obvious that the undefined attribute does not have a corresponding field in the submitted data (as expected or logical).

To solve

  • Start by looking at the existing ones in the projectaxiosWhether there is already processing for them (it is checked that only some common configurations are not processed for submitted data)
  • Well, it probably isaxiosIt has done a layer of processing, the screening process is as follows:

Axios.js

utils.forEach(['post'.'put'.'patch'].function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  console.log(data)	// Data is still the original data
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});


Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  if (typeof config === 'string') {
    config = utils.merge({
      url: arguments[0]},arguments[1]);
  }

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

  // Hook up interceptors middleware
  // dispatchRequest = dispatchRequest = dispatchRequest
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
};
Copy the code

dispatchRequest.js

// Transform request data
config.data = transformData(
	config.data,
	config.headers,
	config.transformRequest
);
Copy the code

transformData.js

module.exports = function transformData(data, headers, fns) {
  /*eslint no-param-reassign:0*/
  console.log(String(fns[0]))
  utils.forEach(fns, function transform(fn) {
    data = fn(data, headers);
  });

  return data;
};
Copy the code

Printed content

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();
    }
    JSON. Stringify (obj) filters out undefined
    if (utils.isObject(data)) {
      setContentTypeIfUnset(headers, 'application/json; charset=utf-8');
      return JSON.stringify(data);
    }
    return data;
}
Copy the code

Verify: dispatchRequest.js

// Transform request data
config.data = transformData(
	config.data,
	config.headers,
	config.transformRequest
);
console.log(config.data);
// result: right
{
	"categoryId":5503."categoryName":"test41"."imgUrl":"hello"
}
Copy the code

conclusion

Axios defaults to a layer of json.stringify () processing on data in the request interceptor. (Later encountered this kind of problem can go step by step to see the specific principle, can suddenly be enlightened)