vue基础之在vue中使用axios

一、分类

get:请求数据
post：提交数据
put：更新数据（所有的数据都推送到后端）
patch：更新数据（只推送更新的数据到后端）
delete：删除数据

二、使用get，post，put，patch，delete，以及并发请求

get

 //get
    axios.get(url, { params: {} }).then((res) => { })
    axios({
      method: "get",
      url: "",
      params: {}
    }).then((res) => { })

post

 //post
    axios.post(url, data, config).then((res) => { })
    axios({
      method: "post",
      url: "",
      data: ,
    }).then((res) => { })

put

   //put
    axios.post(url, data, config).then((res) => { })
    axios({
      method: "put",
      url: "",
      data: 
    }).then((res) => { })

patch

    //patch
    axios.post(url, data, config).then((res) => { })
    axios({
      method: "patch",
      url: "",
      data: 
    }).then((res) => { })

delete

  //delete
    //使用params，参数在url中
    axios.delete(url, { params: {} }).then((res) => { })
    axios({
      method: "delete",
      url: "",
      params: {}
    }).then((res) => { })

    //使用data，参数在request中
    axios.delete(url, { data: {} }).then((res) => { })
    axios({
      method: "delete",
      url: "",
      data: {}
    }).then((res) => { })

并发请求

  //并发请求
    axios.all([
      axios.get('url1'),
      axios.get('url2')
    ]).then(axios.spread((res1, res2) => { }))

三、实例、拦截器、错误处理

创建实例，以及配置

   //创建实例
    let instance = axios.create({
      baseURL: '',//请求的基本地址
      timeout: 1000,//超时时间
      url: '',//请求路径
      method: '',//请求方法
      headers: {},//设置请求头
      params: {},//请求参数，放在请求体
      data: {} //请求参数，放在请求体
    })
    instance.get(url, { params: {} }).then((res) => { })

    //全局配置
    axios.defaults.timeout = 10,
    //实例配置
    instance.defaults.timeout = 100,
    //请求配置
    instance.get(url, { timeout = 1000 }).then((res) => { })

拦截器

    //请求拦截
    axios.interceptors.request.ues(
      //请求前的操作，请求错误
      config => {
        //请求前的操作
        return config
      },
      err => {
        //请求没成功,返回错误
        return Promise.reject(err)
      }
    )

    //响应拦截
    axios.interceptors.response.ues(
      //请求后，响应成功的操作，响应错误
      res => {
        //响应成功的数据
        return res
      },
      err => {
        //响应错误,返回错误
        return Promise.reject(err)
      }
    )

错误处理

axios.get().then().catch(err=>{
//其实就是拦截器里面的错误
})

求点赞~~