URLSearchParams processing data sent by axios

In addition to using URLSearchParams to process the data sent by axios, but the compatibility is not good, other compatible methods

 

　　When using the ajax plugin axios, we sometimes encounter some problems, such as: the data format is incorrect

　　Based on the simplest example (post method is used here):

　　

　　In the above example, we directly call the post method of axios, and the parameters passed to the background are in json format, which is very similar to jquery's ajax writing!

　　However, the data format sent by axios is not the same as the default data format sent by jquery ajax. Let us look at the differences:

　　1. Axios data type

　　

　　2. jquery ajax data type

　　

　　See here, some friends will say, it is good to modify the ContentType, but otherwise, even if the ContentType is modified, the data is still incorrect:

　　--------------------->

 

　　Through the various searches of Du Niang, I finally found the answer: Using URLSearchParams to process parameters, the compatibility of URLSearchParams is not high, so you should pay attention to it when using it (you can consider using babel to convert)

　　The specific operations are as follows:

　　----------------->

　　By using URLSearchParams processing, we can be like the data sent by jquery ajax! ! !

　　

Use application / x-www-form-urlencoded format

---

By default, axios serializes JavaScript objects to JSON. To send data in the application / x-www-form-urlencoded format, you can use one of the following options.

Browser

In your browser, you can use the URLSearchParams API as follows:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Please note that all browsers do not support URLSearchParams, but there is a polyfill available (make sure the polyfill global environment).

Alternatively, you can use the qs library to encode the data:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Node.js

In node.js, you can use the querystring module as follows:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

You can also use the qs library.

Promise

---

axios relies on this machine to support ES6 Promise implementation. If your environment does not support ES6 Promises, you can use polyfill.

TypeScript

---

axios includes TypeScript definitions.

import axios from 'axios';
axios.get('/user?ID=12345');

---

axios is largely inspired by the $ http service provided by Angular. Ultimately, Axios strives to provide an independent $ http-like service for use outside of Angular.

 

This article is partially quoted (https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams#Browser_compatibility,https://segmentfault.com/a/1190000005980048)

----------------------------------------------------------------------------------------

In addition to those copied and pasted above, below

The point is here, this is the difference between qs.stringify and JSON.stringify

var a = {name: 'hehe', age: 10};
qs.stringify serialization result is as follows

name=hehe&age=10

The serialization result of JSON.stringify is as follows:

 

"{"a":"hehe","age":10}"

　　So as long as the parameters are not passed in the json format when passing the parameters, they will eventually be converted into the format after qs.stringify conversion, so as long as the name = value format is passed when passing, PHP will also receive normally.

eg:

axios.post('../php/index.php','tel='+this.tel+'&pwd='+this.pwd+'&rpwd='+this.rpwd).then(function (response) {
alert(response.data);

php:

$tel1 = trim($_POST['tel']);