Axios GET请求

使用 Axios，你可以轻松地发送 GET 请求来从服务器获取数据。本教程将详细介绍如何使用 Axios 发送 GET 请求，并处理响应和错误。

发送 GET 请求

使用 Axios 发送 GET 请求非常简单。你可以直接调用 axios.get() 方法，并传入请求的 URL 和可选的配置参数。

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功的响应
    console.log('Data:', response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

添加配置参数

你可以在 GET 请求中添加配置参数，比如查询参数、请求头等。

axios.get('https://api.example.com/data', {
  params: {
    id: 123,
    name: 'example'
  },
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})
.then(response => {
  console.log('Data with params:', response.data);
})
.catch(error => {
  console.error('Error with params:', error);
});

在上面的例子中，params 对象中的键值对将被添加到请求的查询字符串中。

使用 Axios 实例（可选）

如果你需要为多个请求设置相同的配置（比如基础 URL 或请求头），你可以创建一个 Axios 实例。

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Authorization': 'Bearer YOUR_TOKEN_HERE'}
});

instance.get('/data')
  .then(response => {
    console.log('Data from instance:', response.data);
  })
  .catch(error => {
    console.error('Error from instance:', error);
  });

处理响应和错误

在 .then() 方法中，你可以处理成功的响应。响应对象包含多个属性，其中 data 属性通常包含服务器返回的实际数据。

在 .catch() 方法中，你可以处理请求过程中发生的错误。错误对象包含有关错误的信息，比如状态码、响应数据和错误信息。

7. 异步/等待语法（可选）

如果你更喜欢使用 async/await 语法，你可以将 Axios 请求包装在一个异步函数中。

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('Data:', response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

总结

使用 Axios 发送 GET 请求是非常直观和简单的。你可以通过配置参数来定制请求，并使用 .then() 和 .catch() 方法来处理响应和错误。此外，你还可以创建 Axios 实例来共享配置，或者使用 async/await 语法来编写更清晰的异步代码。

本文地址：https://www.tides.cn/p_js-axios-get