One of the most important reasons is that the authors of Vue recommend using it, and the framework works great with Vue!

Features:

  • Send XMLHttpRequests in your browser
  • Send the HTTP request in Node.js
  • Supporting Promise API
  • Intercept requests and responses
  • Transform the request and response data

Multiple request modes are supported:

  • axios(config)
  • axios.request(config)
  • axios.get(url, [, config])
  • axios.delete(url, [, config])
  • axios.head(url, [, config])
  • axios.post(url, [,data[,config] ])
  • axios.put(url, [,data[,config] ])
  • axios.patch(url, [,data[,config] ])

Basic use:

  • The default is get request
const homeUrl = 'http://123.207.32.32:8000/home/multidata'
axios({
    url: homeUrl,
    method: 'get'.// If not defined, the default is get request
}).then(res= > {
    console.log(res);
})
Copy the code
  • Splicing URLS specifically for GET requests? Params :{}
axios({
    url: https://store.crmeb.net/api/pc/get_category_product,
    method: 'get'.// Concatenate the URL specifically for get requests? The following parameter
    params: {
        page: 1.limit: 3,
    }
}).then(res= > {
    console.log(res.data);
})
Copy the code

Concurrent requests

In the development process, sending two requests at the same time, and the requested data arrives together, and then continuing the work is called concurrent request, that is, requesting more than one interface at a time.

Axios makes concurrent requests using the all method. The all method requires that an array is passed in, and the value of each array can be one request. Then () can then merge two requests and return the result as an array

axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products'.params: {
            page: 1.limit: 20.cid: 57.sid: 0.priceOrder: ' '.news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results= > {
    console.log(results)
})
Copy the code

If you want to automatically expand the array, just pass the AXIos.spread () method in the then() method, as follows:

axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products'.params: {
            page: 1.limit: 20.cid: 57.sid: 0.priceOrder: ' '.news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',})// The arrow function can omit the parentheses () for one argument, but not for multiple arguments
]).then(axios.spread((res1, res2) = > {
    console.log(res1);
    console.log(res2);
}))
Copy the code

Tips:

  • Object to deconstruct
const obj = {
	name: 'lotdoc'.age: 30
}
/ / deconstruction
const {name, age} = obj;
Copy the code
  • An array of deconstruction
const names = ['Andy Lau'.Jacky Cheung.'dawn'.Aaron Kwok]
// Subscript deconstruction
const name1 = names[0]..// Array destruct
const [name1, name2, name3, name4] = names
Copy the code