react, axios get post

react axios ajax, get post request parameter problem

axios get

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'

axios
  .get('https://www.difashi.com',
      {
        params: { key: 1 },
        headers: {'cookie': 'k = v'}
      }
  ) .then((response) => {
    // get response
  })

axios get method is simple and clear

axios post

As usual

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'

axios
  .post('https://www.difashi.com',
    {
      name: 'bill',
      age: '12'
    },
  ).then((response) => {
    // get response
  })

Is this OK? The test found that sending failed, so we continued to modify

content-type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import axios from 'axios'

axios
  .post('https://www.difashi.com',
    {
      name: 'bill',
      age: '12'
    },
    {
      headers: {'content-type': 'application / x-www-form-urlencoded'}
    }
  ).then((response) => {
    // get response
  })

After using the form format data, the interface can be issued normally, but the post body data is wrong and becomes

Form data format

No matter how it changes, we find that the form data is this disorder, it looks like it is converted to a string

So check the axios official instructions, find a configuration of transformRequest, meaning to convert the request data format, so we see the axios source code as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// axios/lib/defaults.js

...
transformRequest: [function transformRequest(data, headers) {
  normalizeHeaderName(headers, 'Accept');
  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;
}],
...

This source code roughly explains that data will have a conversion process before it is sent

Since the data we pass to the post is

1
2
3
4
{
  name: 'bill',
  age: '12'
}

Is a Javascript object. According to the logic of transformRequest, the data will be converted to JSON.stringify (data), and the content-type will be modified.
This is not what we expected, our purpose is to make this function return the original data

method one

Now that axios provides the configuration of transformRequest, we can rewrite a simple

1
2
3
transformRequest: function(data) {
  return data;
}

Method Two

The data we passed to the post was changed to FormData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import axios from 'axios'

// convert plain object to FormData
const transformFormData = (obj) => {
  let formData = new FormData()

  for (let k in obj) {
    formData.append(k, obj [k])
  }
  
  return formData
}

axios
  .post('https://www.difashi.com',
    transformFormData({
      name: 'bill',
      age: '12'
    }),
    {
      headers: {'content-type': 'application / x-www-form-urlencoded'}
    }
  ).then((response) => {
    // get response
  })

In this way, axios post receives FormData and returns the original Data

Find the problem, analyze the cause of the problem, and then solve the problem
Learn to read source code, modify the source code of third-party libraries is not a good behavior

Persist in original technology sharing, your support will encourage me to continue to create!