新闻中心

axios 请求

发布时间：2024-12-02 08:17:36 点击量：34

当然，Axios 是一个基于 Promise 的 HTTP 库，可以用于在浏览器和 Node.js 中发送 HTTP 请求。这里我将详细介绍如何使用 Axios 进行 HTTP 请求，包括其基本用法、高级技巧、错误处理，以及在实际应用中的一些*实践。希望这个讲解能达到你要求的字数。

Axios 简介

Axios 是一个流行的 HTTP 客户端，用于发送 HTTP 请求并处理响应。其主要优点包括：

基于 Promise 的架构，简化了异步请求的操作。
支持运行在浏览器和 Node.js 环境中。
提供了丰富的配置选项，方便定制请求。
支持请求和响应拦截器，提供更灵活的操作。
可以自动转换 JSON 数据。
提供防止 CSRF 的支持。

安装

使用 npm 安装 Axios 非常简单。在项目目录中运行以下命令即可：

npm install axios

若使用 Yarn，则可以运行：

yarn add axios

基本用法

在 JavaScript 文件中导入 Axios 后，就可以开始发送请求了。

const axios = require('axios');

// 发送 GET 请求
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

发起不同类型的请求

GET 请求：

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

POST 请求：

axios.post('https://api.example.com/resource', {
  name: 'John Doe',
  age: 30
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

PUT 请求：

axios.put('https://api.example.com/resource/12345', {
  name: 'Jane Doe',
  age: 25
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

DELETE 请求：

axios.delete('https://api.example.com/resource/12345')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

配置选项

Axios 提供了多种选项来配置 HTTP 请求。例如，您可以设置请求超时、响应类型、请求头等。

axios.get('https://api.example.com/resource', {
  timeout: 3000, // 设置请求超时3秒
  headers: {'X-Custom-Header': 'foobar'}
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Request timed out:', error);
});

拦截器

Axios 提供了请求拦截器和响应拦截器，可以在请求或响应处理前进行操作。

请求拦截器：

axios.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  console.log('Request Interceptor:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器：

axios.interceptors.response.use(response => {
  // 对响应数据进行处理
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // 对响应错误进行处理
  return Promise.reject(error);
});

错误处理

使用 Axios 时，处理错误是一个常见的需求。我们通常使用 catch 方法获取错误信息。

axios.get('https://api.example.com/resource')
  .then(response => {
    console.log('Data:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回非 2xx 状态码
      console.error('Server Error:', error.response.status, error.response.data);
    } else if (error.request) {
      // 未收到服务器响应
      console.error('Network Error:', error.message);
    } else {
      // 其他错误
      console.error('Error:', error.message);
    }
  });

取消请求

有时候，我们需要在特定条件下取消已经发出的请求。Axios 提供了 CancelToken 来实现这一功能。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/resource', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数
    cancel = c;
  })
})
.then(response => {
  console.log(response.data);
})
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled:', thrown.message);
  } else {
    // 处理错误
    console.error('Error:', thrown.message);
  }
});

// 取消请求
cancel('Operation canceled by the user.');

在 Node.js 中的使用

在 Node.js 中使用 Axios，可以让我们与外部 API 或服务进行通信，这对于构建服务器端应用程序非常有用。

const axios = require('axios');

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