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 project
axios
Whether there is already processing for them (it is checked that only some common configurations are not processed for submitted data) - Well, it probably is
axios
It 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)