axios在vue中的使用

今天整理了一下axios在vue中的使用。
一、对数据简单的增删改查
1.在router里面进行注册：

  {
    path:'/2-2',
    component:() => import('../views/2-2.vue')
  }

2.mock一个简单数据

{
  "name":"shenbaobao",
  "age":"24"
}

3.增删改查

<script>
import Axios from 'axios'
export default {
  created(){
    /* 请求数据 */
    Axios.get('/data.json',{
      params:{id:12}
    }).then((response)=>{
         console.log(response)
    })
    /* 提交数据 */
    let data={
      id:12
    }
    Axios.post('/post',data).then(
      (res)=>{
        console.log(res)
        }
    )
    let formData = new FormData()
    for(let key in data){
      formData.append(key,data[key])
    }
    Axios.post('/post',formData).then(
      (res)=>{
        console.log(res)
        }
    )
    /* put请求 */
    Axios.put('/put',data).then(
      (res)=>{
        console.log(res)
        }
    )
    /* patch请求 */
    Axios.patch('/patch',data).then(
      (res)=>{
        console.log(res)
        }
    )
    /* 删除数据 */
    Axios.delete('/delete',{
      params:{id:12}
    }).then((res)=>{
      console.log(res)
    })
    
   Axios.delete('/delete',{
      data:{id:12}
    }).then((res)=>{
      console.log(res)
    })
  },
}
</script>

4.并发请求

export default {
  created(){
    /* 并发请求 */
    Axios.all([
      Axios.get("/data.json"),
      Axios.get("/data2.json")
    ]).then(
        Axios.spread(
          (dataRes,data2Res)=>{console.log(
              dataRes,data2Res
          )}
        )
    )  
  }
}