axios的总结知识点

基本知识

1：文档

axios文档

2：优点

1. 基于Promise的异步ajax请求库
2. 浏览器/node端都可以使用
3. 支持取消请求
4. 支持批量发送多个请求
5. 支持请求/响应拦截
6. 请求/响应数据转换

3：axios常用语法

(1) axios（config）:通用的发送任意类型请求的方式

例：

axios({
  url: '/xxxx',
  method: 'post',
  data: {"title": "aaa", "author": "xxx"}
})
  .then(response => {
    console.log('/posts post', response.data)
  })
  .catch(error => {
    console.log(error)
  })

(2) axios.request(config): 等同于axios(config)

例：

axios.request({
  url: '/xxxx',
  method: 'post',
  data: {"title": "aaa", "author": "xxx"}
})
  .then(response => {
    console.log('/posts post', response.data)
  })
  .catch(error => {
    console.log(error)
  })

(3) axios(url[, config])：可以只指定url发get请求

例：

axios('/XXX',{
   params: {
     id: 1
   }
 })
   .then(response => {
     console.log('/posts get', response.data)
   })
  .catch(error => {
    console.log(error)
  })

(4) axios.get(url[, config])： 发get请求

例：

axios.get('/XXX',{
   params: {
     id: 1
   }
 })
   .then(response => {
     console.log('/posts get', response.data)
   })
  .catch(error => {
    console.log(error)
  })

(5) axios.post(url[, data, config])：发post请求

例：

axios.post('/XXX',data,{
   headers:{}
 })
   .then(response => {
     console.log('/posts get', response.data)
   })
  .catch(error => {
    console.log(error)
  })

(6) axios.put(url[, data, config])：发put请求

例：

axios.put('/XXX',data,{
   headers:{}
 })
   .then(response => {
     console.log('/posts get', response.data)
   })
  .catch(error => {
    console.log(error)
  })

(7) axios.delete(url[, config]): 发delete请求

例：

axios.delete('/XXX',{
   params: {
     id: 1
   }
 })
   .then(response => {
     console.log('/posts get', response.data)
   })
  .catch(error => {
    console.log(error)
  })

常用的配置

1：全局配置

(1) axios.defaults.xxx: 请求的默认全局配置

例：

axios.defaults.baseURL = 'http://localhost:3000'  //指定请求的基本地址是 http://localhost:3000

(2) axios.create([config]): 创建一个新的axios

例：

const instance = axios.create({
  baseURL: 'http://localhost:4000'
})

// 使用instance发请求,请求地址为：'http://localhost:4000/xxx'
instance.get('/xxx')

注意：axios.create（）创建的对象不具备取消请求，批量发送多个请求的功能

2：拦截器

(1) axios.interceptors.request.use(): 添加请求拦截器

例：

axios.interceptors.request.use(
  config => {
    console.log('request interceptor1 onResolved()')
    return config
  },
  error => {
    console.log('request interceptor1 onRejected()')
    return Promise.reject(error);
  }
)

(2) axios.interceptors.response.use(): 添加响应拦截器

例：

axios.interceptors.response.use(
 response => {
   console.log('response interceptor1 onResolved()')
   return response
 },
 function (error) {
   console.log('response interceptor1 onRejected()')
   return Promise.reject(error);
 }
)

3：取消请求

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误

(1) 基本流程

1. 配置 cancelToken 对象
2. 保存用于取消请求的 cancel 函数
3. 在后面特定时机调用 cancel 函数取消请求
4. 在错误回调中判断如果 error 是cancel ，做相应处理

例（我这用的是Vue来写）：

<template>
  <div class="myCanacle">
    <button @click="get1">发送请求1</button><br>
    <button @click="get2">发送请求2</button><br>
    <button @click="cancelReq">取消请求</button><br>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        cancel: null // 声明一个用于保存取消函数的变量
      }
    },
    methods: {
      // 请求1
      get1 () {
        var _this = this
        axios({
          url: 'http://localhost:4000/products1',
          // 配置 cancelToken 对象 
          cancelToken: new axios.CancelToken((c) => {
            // 保存取消函数, 用于之后可能需要取消当前请求
            _this.cancel = c
          })
        }).then(
          response => {
            _this.cancel = null
            console.log('请求1成功了', response.data)
          }
        ).catch(error => {
            _this.cancel = null
            console.log('请求1失败了', error.message, error)
          })
      },
      // 请求2
      get2 () {
        var _this = this
        axios({
          url: 'http://localhost:4000/products1',
          cancelToken: new axios.CancelToken((c) => {
            // 保存取消函数, 用于之后可能需要取消当前请求
            _this.cancel = c
          })
        }).then(
          response => {
            _this.cancel = null
            console.log('请求2成功了', response.data)
          }
        ).catch(error => {
          _this.cancel = null
          console.log('请求2失败了', error.message, error)
        })
      },
      // 取消请求
      cancelReq() {
        if (typeof this.cancel === 'function') {
          this.cancel('强制取消请求')
        } else {
          console.log('没有可取消的请求')
        }
      }
    }
  }
</script>

<style>
  .myCanacle{

  }
</style>

效果图：

(2) 配合拦截器实现上一个接口还未响应 下一个接口开始请求，把上一个接口取消

例：

<template>
  <div class="myCanacle">
    <button @click="get1">发送请求1</button><br>
    <button @click="get2">发送请求2</button><br>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        cancel: null // 声明一个用于保存取消函数的变量
      }
    },
    mounted () {
      var _this = this
      // 添加请求拦截器
      axios.interceptors.request.use(config => {
        // 在准备发请求前, 取消未完成的请求
        if (typeof _this.cancel === 'function') {
          _this.cancel('取消请求')
        }
        // 添加一个cancelToken的配置
        config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
          // 保存取消函数, 用于之后可能需要取消当前请求
          _this.cancel = c
        })
        return config
      })

      // 添加响应拦截器
      axios.interceptors.response.use(
        response => {
          _this.cancel = null
          return response
        },
        error => {
          if (axios.isCancel(error)) {// 取消请求的错误
            console.log('请求取消的错误', error.message) // 做相应处理
            return new Promise(() => {})
          } else { // 请求出错了
            _this.cancel = null
            // 将错误向下传递
            return Promise.reject(error)
          }
        }
      )
    },
    methods: {
      // 请求1
      get1 () {
        axios({
          url: 'http://localhost:4000/products1'
        }).then(
          response => {
            console.log('请求1成功了', response.data)
          }
        ).catch(error => {
            console.log('请求1失败了', error.message, error)
          })
      },
      // 请求2
      get2 () {
        axios({
          url: 'http://localhost:4000/products1'
        }).then(
          response => {
            console.log('请求2成功了', response.data)
          }
        ).catch(error => {
          console.log('请求2失败了', error.message, error)
        })
      },
      // 取消请求
      cancelReq() {
        if (typeof this.cancel === 'function') {
          this.cancel('强制取消请求')
        } else {
          console.log('没有可取消的请求')
        }
      }
    }
  }
</script>

<style>
  .myCanacle{

  }
</style>

效果图（我连续重复点击两次：发送1，发送2）：

---