Vue --- axios的请求方式

提示：如果你是在main.js通过import axios from 'axios'引入的，以下请求的代码就直接放在main.js中最下面即可（如果接口失效，就另辟蹊径吧）

先看下格式，可以看到有url、method、timeout等等，但为了看着简洁，后面不会每个都写上，会针对性的使用

axios({
  url: '接口的地址，也可以跟参数',
  method: '默认为GET，可以直接写POST，改成POST请求',
  params: '传递参数，必须是无格式对象',
  data: '作为请求主体被发送的数据body参数',
  timeout: '请求超时时间，单位为毫秒',
  headers: '发送的自定义请求头'
})

方式一：axios({})

1、最基本的请求方式

axios({
  url:"http://123.207.32.32:8000/home/multidata"
}).then(res => {
  console.log(res);
}).catch( (error) => {
  console.log(error);
});

2、上面的请求方式默认为GET方式，如果想要是POST请求，直接如下这么改即可（不过这个接口不支持POST）

axios({
  url:"http://123.207.32.32:8000/home/multidata",
  method:"POST"
}).then(res => {
  console.log(res);
}).catch( (error) => {
  console.log(error);
});

3、如果想要传递参数，代码如下即可

axios({
  url:"http://123.207.32.32:8000/home/data?type=sell&page=3",
  method:"GET"
}).then(res => {
  console.log(res);
}).catch( (error) => {
  console.log(error);
});

4、传递参数的另一种写法，params

axios({
  url:"http://123.207.32.32:8000/home/data",
  params:{
    type:"sell",
    page:3
  },
  method:"GET"
}).then(res => {
  console.log(res);
}).catch( (error) => {
  console.log(error);
});

方式二：axios.get({})和axios.post({})
1、GET的请求方式

axios.get("http://123.207.32.32:8000/home/multidata")
.then(res => {
  console.log(res);
}).catch( (error) => {
  console.log(error);
});

2、GET的请求方式，并传递参数

axios.get("http://123.207.32.32:8000/home/data",{
  params:{
    type:"sell",
    page:3
  }
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error)
})

3、POST的请求方式以及传递参数（该接口不支持POST，只为演示）

axios.post("http://123.207.32.32:8000/home/data",{
  type:"sell",
  page:3
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error)
})

方式三：axios.all()，处理并发请求，请求完后会把请求的数据放到数组里，比如有三个接口，那么数组里就会有三个数据

基本格式

axios.all([axios(),axios()])
  .then(res => {
  
  })

实例代码

axios.all([axios({
    url:"http://123.207.32.32:8000/home/multidata"
  }),axios({
    url:"http://123.207.32.32:8000/home/data",
    params:{
      type:"sell",
      page:3
    }
  })
]).then(res => {
    console.log(res)
  })

效果如下

但是取数据的话，就只能写成这样

console.log(res[0])
console.log(res[1])

解决方法如下，通过axios.spread即可

axios.all([axios({
  url:"http://123.207.32.32:8000/home/multidata"
}),axios({
  url:"http://123.207.32.32:8000/home/data",
  params:{
    type:"sell",
    page:3
  }
})
]).then(axios.spread((res1,res2) => {
  console.log(res1)
  console.log(res2)
}))