• npm安装

npm install axios --save

• 在mian.js或新建的文件中引入

import axios from 'axios'

• axios的全局配置
  事实上，在开发中可能很多参数都是固定的
  这个时候我们可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'xxxx.com'
axios.defaults.timeout = 5000//规定请求响应时间

• axios基础使用

axios({
  url:'xxx',
  method:'get/post',
  //注意
  //get请求时使用params:{key:"aaa"}传参
  //post请求时使用params/data:{id:11}传参
  data:{} / params:{}
}).then(res=>{
  console.log(res)
})

如下图：

axiosimg.png

• axios(get)使用

axios.get('xxx',{
  params:{参数}
}).then()

• axios(post)使用

axios.post('xxx',{参数}).then()

• axios发送并发请求,使用axios.all可以放入多个请求的数组
  axios.all([])返回的结果是一个数组
  使用axios.spread可将数组[res1,res2]展开为res1,res2

axios.all([
  axios({}),//第一请求
  axios.get()//第二个请求
]).then(axios.spread(res1,res2)=>{
  console.log(res1)
  console.log(res2)
})

• 创建对应的axios的实例
  当某些请求需要使用特定的baseURL或者timeout或者content-Type等时使用实例

const instance1 = axios.create({
  baseURL:"xxx.com",
  timeout:5000
})

instance1({
  url:'/xxxx'
}).then(res=>{
  console.log(res)
})

const instance2 = axios.create({
  baseURL:'yyy.com',
  timeout:2000
})

instance2({
  url:'/yyyy'
}).then(res=>{
  console.log(res)
})

• axios拦截器

//请求拦截
instance.interceptors.request.use(config => {
  //1.比如config中的一些信息不符合服务器的要求，可进行操作
  //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
  //3.某些网络请求，必须携带一些特殊的信息(比如登陆token)
    return config
  },err =>{
    console.log(err)
  })

//响应拦截
instance.interceptors.response.use(res => {
  //处理返回的数据
  return res.data
},err => {})