qs. In the stringify interface, the input parameter is converted into a & connected string (with the application / x-www-form-urlencoded request header)

Basic format

import request from '@/utils/request';// It mainly does some unified encapsulation processing for requests , The use of axios
import qs from 'qs';

export function xxxapi(data) {
    
    return request({
    
        url: 'xxx/xxx/xxx',
        headers: {
     'content-type': 'application/x-www-form-urlencoded' },
        method: 'post',
        data: qs.stringify(data)
    })
}

Network display

Format of request header and response header

Submit load

The request payload is submitted as a form , With & The string of the connection

After the browser compiles and formats ：

Interface to return json Format

The input parameter contains complex data types , Be careful Json Convert to string , Otherwise, the report will be wrong

When qs.stringify Encountered complex data types , Set objects as many as possible ：

{
    
	aaa:[{
    
		name:'test',
		age:20
	}]
}

Displayed in the request as ：


At this time, the interface will report an error （500）, Because the interface that submits the form should have received variables aaa, But after treatment, it becomes aaa[0][name], Cannot match interface correctly . So when you encounter complex data types , First pass through JSON.stringify() Convert to string .

other

If only application/x-www-form-urlencoded no need qs.stringify Handle data The input parameter format is as follows ：

With application/json Format request

detailed application/json and application/x-www-form-urlencoded difference