vue基础之在vue中使用axios（超级详细，学不会来砍我）

一、分类

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

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

config

config = {
      baseURL: '',//请求的基本地址
      timeout: 1000,//超时时间
      url: '',//请求路径
      method: '',//请求方法
      headers: {},//设置请求头
      params: {},//请求参数，放在URL上
      data: {} //请求参数，放在请求体
    }

get

 //get
   //方式一：
    axios.get(url, config).then((res) => { })
	//例子
	axios.get(url, { params: {id:8} }).then((res) => { console.log(res)})
	//最后请求的是url?id=8,返回的数据在res中
  
   //方式二：
   axios({
      method: "get",
      url: "",
      params: {},
      ......
    }).then((res) => { })

post

 //post
 	//方式一
    axios.post(url, data, config).then((res) => { })
    //这里的data就是前端传输过去的数据。不用写成下面的形式，当然你可以试一试下面会则呢么样。
    //axios.post(url,{data:{id:2}}).then((res) => { })
   
    
    //方式二
    axios({
      method: "post",
      url: "",
      data: ,
    }).then((res) => { })

put

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

patch

    //patch
    axios.patch(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: {},//请求参数，放在URL上
      data: {} //请求参数，放在请求体
    })
    //使用方法和上面的axios一样
    instance.get(url, { params: {} }).then((res) => { })

    //全局配置
    axios.defaults.timeout = 10,
    //实例配置
    instance.defaults.timeout = 100,
    //请求配置，也就是前面案例中的config
    instance.get(url, { timeout = 1000 }).then((res) => { })

拦截器

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

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

错误处理

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

求点赞~~