一、Axios是什么

• Axios是基于promise的http库
• 可以用于浏览器和node.js

二、Axios有哪些特性

• 支持promise API
• 拦截请求和相应（意思就是它可以在请求或者相应前做一些操作，比如说想在请求前加一些信息，比如授权信息等）
• 转换请求数据和响应数据（比如在请求的时候一些敏感信息需要加密，在请求回来的时候也可以进行解密）
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

三、axios的一些常见的请求方法：get，post，put，patch，delete等

get:获取数据
post：提交数据（表单提交、文件上传）
put:更新数据（所有数据推送到后端）
patch：更新数据（只推送修改的数据到后端）
delete：删除数据

四、axios方法的基本使用

4-1:get请求

（1）get的第一种写法（使用json格式数据来模拟接口实现axios的使用）

在public文件夹下新建一个data.json文件

在vue中简单使用

<template>
<div>home</div>
</template>
<script>
import axios from 'axios'
export default {
  created() {
    axios.get('data.json').then((res) => {
      console.log(res) //输出当前的请求
    })
  },
}
</script>

在控制台查看输出～

get方法有时候是带参的，这时候需要在路径后面添加对象params

<script>
import axios from 'axios'
export default {
  created() {
    axios.get('/data.json', {
        params: {
          id: 12,
 //最终请求路径是：http://localhost:8080/data.json?id=12
        },
      })
      .then((res) => {
        console.log(res)
      })
  },
}
</script>

在network上可以看到请求传参了

(2) get的第二种写法

<script>
import axios from 'axios'
export default {
  created() {
    axios({
      method: 'get',
      url: '/data.json',
    }).then((res) => {
      console.log(res)
    })
  },
}
</script>

同样也能在控制台中查看res输出内容

这种方法如果需要传递参数，直接添加params

import axios from 'axios'
export default {
  created() {
    axios({
      method: 'get',
      url: '/data.json',
      params: {
        id: 12,
      },
    }).then((res) => {
      console.log(res)
    })
  },
}

4-2 post请求

post请求有三个参数
axios.post(/url,{},config) 第一个参数为请求路径，第二个参数为请求的数据，这其中，post请求数据有两种，一种是form-data(表单提交，文件上传，图片上传)，另一种是application/json

第一种post请求写法（模拟application/json格式的数据）

export default {
  created() {
    let data = {
      id: 12,
    }  //模拟
    axios.post('/lujing', data).then((res) => {
      console.log(res)
    })
  },
}

这时候可以在network中看到数据格式：

第二种post请求写法（模拟application/json格式的数据）

export default {
  created() {
    let data = {
      id: 12,
    }
    axios({
      method: 'post',
      url: '/lujing',
      data: data,   //第一个data为post参数里第二个参数
    }).then((res) => {
      console.log(res)
    })
  },
}

post第一种写法（模拟form-data格式的数据）

export default {
  created() {
    let data = {
      id: 12,
    }
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    } //模拟formData
    axios.post('/lujing', formData).then((res) => {
      console.log(res)
    })
  },
}

这时候就能在network中看到数据格式了

post第二种写法（模拟form-data格式的数据）

export default {
  created() {
    let data = {
      id: 12,
    }
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }  //模拟formData
    axios({
      method: 'post',
      url: 'lujing',
      data: formData,
    })
  },
}

4.3 put请求

export default {
  created() {
    let data = {
      id: 12,
    }
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }
    //put
    axios.put('lujing', data).then((res) => {
      console.log(res)
    })
  },
}

4.3 patch请求

export default {
  created() {
    let data = {
      id: 12,
    }
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }
    //patch
    axios.patch('lujing', data).then((res) => {
      console.log(res)
    })
  },
}

4.4 delete请求

delete第一种写法

export default {
  created() {
    axios
      .delete('/lujing', {
        params: {
          id: 12,
        },
      })
      .then((res) => {
        console.log(res)
      })
  },
}

delete第二种写法

export default {
  created() {
    axios({
      url: '/lujing',
      method: 'post',
      params: {
        id: 12,
      },
    })
  },
}

4.5 并发请求

并发请求：同时进行多个请求，并统一处理返回值。比如一个聊天系统，需要同时展示个人信息和好友列表，但是个人信息和好友列表是两个接口，这时候需要同时处理两个接口，这时候就需要用到并发请求了

并发请求需要用到两个方法，分别是axios.all()和axios.spread()

• axios.all()的参数是一个数组，数组里面是一个个axios请求，
• axios.spread()是在axios.all()多个请求完成时候，对返回值进行处理，用axios.spread()方法代替以前的res,有几个接口就有几个返回值

<script>
import axios from 'axios'
export default {
 created() {
   axios.all([axios.get('/data.json'), axios.get('/city.json')]).then(
     axios.spread((dataRes, cityRes) => {
       //用axios.spread()方法代替以前的res,有几个接口就有几个返回值
       console.log(dataRes, cityRes)
     })
   )
 },
}
</script>