Vue——axios基本使用

一、axios安装

在terminal上输入npm install axios安装
在mian.js中引入import axios from ‘axios’

二、axios使用

axios({
  url:url,
}).then(res => {
  console.log(res)
})

默认get方式，使用post可以加method

axios({
  url:url,
  method:'post',
}).then(res => {
  console.log(res)
})

需要传数据就加pramas

axios({
  url:url,
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res)
})

axios发送并发请求

axios.all([axios({
  url:url1
}),axios({
  url:url2,
  params:{
    type:'pop',
    page:1
  }
})]).then(results => {
  console.log(results)  //数组
})

若想返回两组数据，那么可以使用axios.spread

axios.all([axios({
  url:url1
}),axios({
  url:url2,
  params:{
    type:'pop',
    page:1
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

三、配置baseurl和超时

axios.defaults.baseURL = 'http://192.168.8.74';
axios.defaults.timeout = 5000;
axios.all([axios({
  url:'/home/cart'
}),axios({
  url:'/home/goods',
  params:{
    type:'pop',
    page:1
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

注：接口自行更换
推荐谷歌扩展程序JSON-handle，可将接口返回的数据格式化