日常小记：axios在vue中的使用

1、axios请求方法和别名

这是axios的请求方法

axios({
      method:'get',
      url:'/data.json',
      params:{
        id:12
      }
    })

这是axios的请求方法别名

axios.get('/data.json',{
      params:{
        id:12
      }
    })

可以看出来，别名就是将请求方法config中的method和url两个字段抽取了出来，是请求方法的简写，剩余字段依然定义在config中。

2、复习下几种请求方法

常用的请求方法有get post put patch delete

• get 获取数据
• post 提交数据（例如表单提交和文件上传）
• put 更新数据（推送所有数据到后端）
• patch 更新数据（只推送修改部分的数据到后端）
• delete 删除数据
  尽管post put patch 使用方式非常相似并且在使用上也没有严格的约束，但我们应该遵守规范编写代码。
  post方法根据携带数据方式的不同又分为两种：
  1、application/json（常用）

// data是一个数据
    let data = {
      id:12
    }
    axios({
      method:'post',
      url:'/post',
      data:data
    })

2、form-data（较少用到，但在文件上传等场景还会使用）

// form-data请求
    let formData = new FormData()
    for(let key in data) {
      formData.append(key,data[key])
    }
    axios.post('/post', formData).then((res)=>{
      console.log(res)
    })

最后有关别名再提一点，delete和get别名写法只有url和config两个参数，post put和patch方法则有三个参数

3、并发请求

并发请求：同时进行多个请求，并统一处理返回值
使用场景：当同时请求多个接口并且要同时使用多个接口返回值时，使用并发请求

axios.all([
      axios.get('/data.json'),
      axios.get('/city.json')
    ]).then(
      axios.spread((dataRes, cityRes)=>{
        console.log(dataRes)
        console.log(cityRes)
      })
    )

4、axios实例和配置

使用场景：当接口地址有多个，并且超时时长不同时，使用axios实例

let instance = axios.create({
      baseURL:'http://localhost:8080',
      timeout:1000,
      url:'/data.json',
      method:'get',
      headers:{},
      params:{},
      data:{}
    })
    instance.get('/data.json').then((res)=> {
      console.log(res)
    })

在该实例中配置了多个config字段，值得注意的是，params和data都是携带数据，但前者拼接在url尾部，而后者则存放在请求体中

axios三种配置位置，优先级从低到高
1 全局配置
axios.defaults.baseURL
axios.default.timeout
2 实例配置
instance.defaults.timeout
3 请求配置
写在{}中

5、拦截器

从字面可以看出拦截器的作用，常用的有请求和响应拦截，还有一种是取消拦截，但较少使用

axios.interceptors.request.use(
      config=>{
        // 发送请求前做些什么
        return config
      },
      err=>{
        // 请求错误时做些什么(成功时用Promise.resolve)
        return Promise.reject(err)
      }
    )
    // 响应拦截器
    axios.interceptors.response.use(
      res=>{
        // 请求成功后返回的数据res
        return res
      },
      err=>{
        // 响应错误后做什么
        return Promise.reject(err)
      }
    )

6、取消请求

一些特定场景，比如在后台管理中，要请求大量数据，请求时间比较长，这时候允许我们取消请求

// 通过source方法创建一个CancelToken对象
    let source = axios.CancelToken.source()
    axios.get('/data.json',{
      cancelToken:source.token
    }).then((res)=> {
      console.log(res)
    }).catch(err=>{
      // 当你取消请求后就会进入catch方法
      console.log(err)
    })
    // 取消请求,这个message：cancel http会到catch的err中
    source.cancel('cancel http')

好了，这就是axios的一则小记。