最重要的一个原因是,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

 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐