axios 函数和事件

Axios 函数和事件

回调函数

  1. then - 请求成功时调用的函数，通常接收两个参数：响应对象和解析函数。

    1
    2
    3
    4
    5
    axios.get('/user')
      .then(function(response) {
        // 处理响应数据
        console.log(response.data);
      });

  2. catch - 请求失败时调用的函数，接收一个参数，即错误对象。

    1
    2
    3
    4
    5
    axios.get('/user')
      .catch(function(error) {
        // 处理错误
        console.log(error);
      });

  3. finally - 请求完成后调用的函数，无论请求成功还是失败都会执行。

    1
    2
    3
    4
    5
    axios.get('/user')
      .finally(function() {
        // 请求完成后的操作
        console.log('请求已完成');
      });

  4. onUploadProgress - 用于上传请求的进度事件处理函数。

    1
    2
    3
    4
    5
    6
    axios.post('/user', data, {
      onUploadProgress: function(progressEvent) {
        // 处理上传进度事件
        console.log(progressEvent);
      }
    });

  5. onDownloadProgress - 用于下载请求的进度事件处理函数。

    1
    2
    3
    4
    5
    6
    axios.get('/user', {
      onDownloadProgress: function(progressEvent) {
        // 处理下载进度事件
        console.log(progressEvent);
      }
    });

监听事件

Axios 也提供了一些事件监听，允许你监听请求的特定事件：

  1. onreadystatechange - 当请求的 readyState 改变时触发。
  2. onload - 当请求成功完成时触发。
  3. onerror - 当请求由于错误而失败时触发。
  4. ontimeout - 当请求超时时触发。
  5. onabort - 当请求被中断时触发。

这些事件可以通过配置对象中的相应字段来设置，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
axios.get('/user', {
  onreadystatechange: function() {
    // 当请求的 readyState 改变时执行的操作
  },
  onload: function() {
    // 请求成功完成时执行的操作
  },
  onerror: function() {
    // 请求由于错误而失败时执行的操作
  },
  ontimeout: function() {
    // 请求超时时执行的操作
  },
  onabort: function() {
    // 请求被中断时执行的操作
  }
});

请注意，由于 Axios 是基于 Promise 的，因此 then 和 catch 是处理异步操作的主要方式，而 finally 用于无论成功还是失败都会执行的代码。onUploadProgress 和 onDownloadProgress 则用于处理上传和下载的进度事件。其他监听事件通常用于更细粒度的控制和响应请求的不同阶段。