如何使用Axios发送GET请求：初学者指南

在构建Web应用时，从API获取数据是一项常见任务。JavaScript开发者通常从内置的fetch()方法开始，但很快就会遇到问题——比如需要手动解析JSON响应和繁琐的错误处理。Axios通过提供自动JSON解析、更好的错误处理和更简便的请求定制，简化了HTTP请求的发送，尤其是GET请求。

什么是Axios？

Axios是一个流行的JavaScript库，用于在浏览器和Node.js中发送HTTP请求。与内置的fetch()不同，Axios自动解析JSON响应，一致地处理HTTP错误，并支持方便的请求功能，如取消和超时设置。

安装Axios

您可以使用npm、Yarn安装Axios，或通过CDN引入：

npm

npm install axios

Yarn

yarn add axios

CDN

<script src=""https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js""></script>

将Axios导入到您的项目中：

import axios from 'axios';
// 或
const axios = require('axios');

发送基本GET请求

以下是如何轻松发送基本GET请求：

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axios自动处理获取和解析JSON响应。

处理响应数据

使用Axios，您不需要额外的解析步骤。返回的响应包含一个data属性，已经是JavaScript对象格式：

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // 打印响应中的标题
  });

Axios GET请求中的错误处理

Axios直观地处理错误，捕获HTTP和网络问题。以下是如何清晰管理这些错误：

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('HTTP错误:', error.response.status);
    } else if (error.request) {
      console.error('无响应:', error.request);
    } else {
      console.error('请求设置错误:', error.message);
    }
  });

在Axios GET请求中使用查询参数

使用Axios发送查询参数很简单：

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

Axios自动将这些参数格式化为查询字符串。

将Async/Await与Axios一起使用

Async/Await语法使Axios请求更易读：

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('错误:', error);
  }
}

fetchPosts();

这使您的代码更简单、更清晰。

在Axios GET请求中设置请求头

您可以轻松设置请求头（如认证令牌）：

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

这让您可以毫不费力地包含自定义请求头。

使用Axios发送多个GET请求

如果您需要同时发送多个请求，Axios简化了这一过程：

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('帖子:', posts.data);
    console.log('用户:', users.data);
  })
  .catch(error => {
    console.error('错误:', error);
  });

Axios对同时请求的处理使您的代码更高效。

结论

Axios简化了JavaScript中的HTTP GET请求，消除了繁琐的任务，如JSON解析和复杂的错误处理。无论您是发送简单请求、使用查询参数、自定义请求头，还是发送多个并发请求，Axios都能帮助您编写更简洁、更易维护的代码。

常见问题