为何选择axios?

最重要的一个缘由是，vue的做者推荐使用，再一个这个框架配合vue确实很棒！

功能特色：

• 在浏览器中发送XMLHttpRequests请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据

支持多种请求方式：

• 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] ])

基本使用：

• 默认为get请求

const homeUrl = 'http://123.207.32.32:8000/home/multidata'
axios({
    url: homeUrl,
    method: 'get',   // 这里若是不定义则默认为get请求
}).then(res => {
    console.log(res);
})
复制代码

• 专门针对get请求拼接url？后边的参数,传入params:{}

axios({
    url: https://store.crmeb.net/api/pc/get_category_product,
    method: 'get',
    // 专门针对get请求拼接url？后边的参数
    params: {
        page: 1,
        limit: 3,
    }
}).then(res => {
    console.log(res.data);
})
复制代码

并发请求

开发过程当中，同时发送两个请求，而且请求的数据一块儿到达后，再继续后续的工做的方式叫作并发请求，也就是一次请求多个接口（我的理解！）

axios并发请求, 使用all方法，all方法要求传入的是一个数组，每一个数组的值能够为一次请求,以后在all方法外层直接.then()便可合并两次请求,返回的结果为一个数组

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)
})
复制代码

若是你想自动把这个数组展开的话在then()方法中传入axios.spread()方法便可，以下所示：

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(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
复制代码

小知识点：

• 对象解构

const obj = {
	name: 'lotdoc',
    age: 30
}
// 解构
const {name, age} = obj;
复制代码

• 数组解构

const names = ['刘德华', '张学友', '黎明', '郭富城']
// 下标解构
const name1 = names[0]
.
.
// 数组解构
const [name1, name2, name3, name4] = names
复制代码