one Configuration information

1. We communicate asynchronously through AXIOS and use server-side Settings to solve cross-domain problems;

2. Sometimes, we need to configure parameters in the URL address for data filtering (here is only JSON, understand the line);

axios.get('https://cdn.liyanhui.com/data.json', {
    params : {
        id : 19,
        status : 1,
    }
}).then(res => {
    console.log(res.data);
});
Copy the code

3. I can also implement all configurations, such as GET and URL, in configuration mode;

axios({
    method : 'get',
    url : 'https://cdn.liyanhui.com/data.json',
    params : {
        id : 19,
        status : 1,
    }
}).then(res => {
    console.log(res.data);
});
Copy the code

two The concurrent operation

1. If multiple asynchronous requests are likely to occur in the project, they will be executed based on how long it takes;

2. If we want all asynchronous requests to be executed in the specified order, use all();

Axios. All ([axios ({url: 'https://cdn.liyanhui.com/data.json' data: '1. Asynchronous}), axios ({url: 'https://cdn.liyanhui.com/data.json' data: '2. Asynchronous'}), axios ({url:' https://cdn.liyanhui.com/data.json 'data: Then (value => {for (let I = 0; i < value.length; i ++) { console.log(value[i].config.data); }})Copy the code
  1. The above loop is cumbersome, so Axios offers another solution:
.then(axios.spread((res1, res2, res3) => {

    console.log(res1.config.data);

    console.log(res2.config.data);

    console.log(res3.config.data);

}))
Copy the code

Practice code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> // axios.get('https://cdn.liyanhui.com/data.json?id=10&status=5') // .then(res => { // console.log(res.data); / /}); // axios.get('https://cdn.liyanhui.com/data.json', { // params : { // id : 1, // status : 5 // } // }).then(res => { // console.log(res.data); / /}); // axios({ // method : 'get', // url : 'https://cdn.liyanhui.com/data.json', // params : { // id : 1, // status : 5 // } // }).then(res => { // console.log(res.data); / /}); // axios({ // method : 'get', // url : 'https://cdn.liyanhui.com/data.json', // params : { // id : 1, // status : 5 // } // }).then(res => { // console.log('1. Asynchronous'); / /}); // // axios({ // method : 'get', // url : 'https://cdn.liyanhui.com/data.json', // params : { // id : 1, // status : 5 // } // }).then(res => { // console.log('2. Asynchronous'); / /}); // // axios({ // method : 'get', // url : 'https://cdn.liyanhui.com/data.json', // params : { // id : 1, // status : 5 // } // }).then(res => { // console.log('3. Asynchronous'); / /}); [/ / / / axios. All (axios ({/ / url: 'https://cdn.liyanhui.com/data.json', / / data: '1. Asynchronous / /}), / / axios ({/ / url: 'https://cdn.liyanhui.com/data.json', / / data: '2. Asynchronous / /}), / / axios ({/ / url: 'https://cdn.liyanhui.com/data.json', / / data: '3. Asynchronous / /}), / /]). Then (value = > {/ / for (a let I = 0; i < value.length; i++) { // console.log(value[i].config.data); / / / /}}); Axios. All ([axios ({url: 'https://cdn.liyanhui.com/data.json' data: '1. Asynchronous}), axios ({url: 'https://cdn.liyanhui.com/data.json' data: '2. Asynchronous'}), axios ({url:' https://cdn.liyanhui.com/data.json 'data: Then (axios.spread((res1, res2, res3) => {console.log(res1.config.data); console.log(res2.config.data); console.log(res3.config.data); })); </script> </head> <body> </body> </html>Copy the code