Axios 用例

安装 Axios

在开始使用 Axios 之前，首先需要将其安装到你的项目中。Axios 可以通过 npm 或者 yarn 来安装。这里以 npm 为例：

npm install axios

或者如果你使用的是 yarn：

yarn add axios

发送基本请求

Axios 提供了多种方法来发送 HTTP 请求。最常用的有 get, post, put, 和 delete 方法。这些方法都返回一个 Promise 对象，这意味着你可以使用 .then() 和 .catch() 方法来处理异步操作。

GET 请求示例

下面是一个使用 Axios 发送 GET 请求的简单例子：

// www.javascriptcn.com code example
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

POST 请求示例

POST 请求用于向服务器发送数据。下面是使用 Axios 发送 POST 请求的一个例子：

// www.javascriptcn.com code example
import axios from 'axios';

const userData = {
  name: '张三',
  email: 'zhangsan@example.com'
};

axios.post('https://api.example.com/user', userData)
  .then(response => {
    console.log('User created successfully:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

处理请求配置

Axios 允许你为每个请求提供额外的配置选项。例如，你可以设置请求头、超时时间、以及验证 SSL 证书等。

设置请求头

如果你想在请求中添加特定的请求头，可以通过配置对象来实现：

// www.javascriptcn.com code example
axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your-token-here',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

设置超时时间

你也可以为请求设置一个超时时间，如果请求在这个时间内没有完成，它将被自动取消：

// www.javascriptcn.com code example
axios.get('https://api.example.com/data', {
  timeout: 5000 // 超时时间为 5 秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('请求超时');
    } else {
      console.error('请求失败:', error);
    }
  });

处理响应数据

Axios 的响应对象包含了一些有用的属性，比如 data, status, statusText, headers, 和 config。这些属性可以帮助你更好地处理和理解服务器返回的数据。

解析响应数据

在处理响应时，通常需要访问 response.data 来获取实际的数据内容：

axios.get('https://api.example.com/data')
  .then(response => {
    const responseData = response.data;
    console.log('接收到的数据:', responseData);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

错误处理

Axios 提供了强大的错误处理功能，允许你捕获并处理各种类型的错误。常见的错误类型包括网络错误、超时错误、以及请求错误。

捕捉网络错误

在网络请求过程中，可能会遇到一些网络错误，比如 DNS 查找失败或连接被拒绝。这些错误可以通过检查 error.code 来识别：

// www.javascriptcn.com code example
axios.get('https://api.example.com/data')
  .catch(error => {
    if (error.code === 'ENOTFOUND') {
      console.error('DNS 查找失败');
    } else if (error.code === 'ECONNREFUSED') {
      console.error('连接被拒绝');
    } else {
      console.error('其他错误:', error);
    }
  });

使用拦截器

Axios 提供了请求和响应拦截器，允许你在请求发送之前或响应到达之后修改它们。这对于日志记录、身份验证令牌处理、或任何需要在请求/响应周期中执行的操作非常有用。

添加请求拦截器

// www.javascriptcn.com code example
// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer your-token-here';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

添加响应拦截器

// www.javascriptcn.com code example
// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  console.log('响应数据:', response.data);
  return response;
}, error => {
  // 对响应错误做点什么
  console.error('响应错误:', error);
  return Promise.reject(error);
});

总结

以上就是使用 Axios 发送 HTTP 请求的一些基本示例和高级用法。通过这些示例，你应该能够开始构建自己的应用，并根据需要调整和扩展功能。希望这个教程对你有所帮助！