使用Axios发送GET请求

# 1. 简介

### 1.1 什么是Axios

Axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。它可以在浏览器和Node.js中使用，并提供了一些强大的功能，使发送HTTP请求变得更加简单和方便。

### 1.2 为什么选择Axios

在Web开发中，我们经常需要与服务器进行数据交互，发送HTTP请求是其中的重要步骤。Axios具有以下优点：

- 支持浏览器和Node.js环境。
- 提供了更简洁、更一致的API，比原生的`XMLHttpRequest`和`fetch`更易于使用。
- 提供了模块化的、可配置的请求和响应拦截器，方便进行一些全局的统一处理。
- 支持取消请求、防止重复请求等常用功能。
- 提供了更好的错误处理机制，能够更好地捕获和处理网络错误和HTTP状态码。

### 1.3 GET请求示例

在接下来的章节中，我们将以一个简单的GET请求实例来介绍如何使用Axios发送请求、处理响应和错误等问题。让我们开始吧！

# 2. 安装和基本配置

在开始使用Axios发送GET请求之前，我们需要先进行一些安装和基本配置的工作。下面将介绍如何安装Axios、如何引入Axios以及如何进行一些基本的配置。

### 2.1 安装Axios

在使用Axios之前，我们需要先安装它。在命令行中执行以下命令来安装Axios：

npm install axios

### 2.2 引入Axios

安装完Axios后，我们可以在我们的代码中引入它。在JavaScript文件中，可以使用以下方式引入Axios：

const axios = require('axios');

在其他支持模块化的环境中，可以使用对应的方法引入Axios。

### 2.3 设置默认配置

在进行请求之前，我们可以设置一些默认的配置，以便在每个请求中都能使用到。以下是一些常用的默认配置项：

- `baseURL`：设置请求的基础URL，方便在每个请求中使用相对URL。
- `timeout`：设置请求的超时时间，当请求超过这个时间后仍未返回结果，则请求被取消。
- `headers`：设置请求的默认头部信息，比如`Content-Type`等。

可以使用以下方法来设置默认配置：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';

以上是设置默认配置的一些例子，可以根据需求来配置其他项。设置完默认配置后，我们就可以开始发送GET请求了。接下来，将介绍如何创建GET请求、发送GET请求并处理响应。

# 3. 发送简单GET请求

发送GET请求是最常见的网络请求操作之一，Axios提供了简单而方便的API来处理GET请求。在这一章节，我们将介绍如何使用Axios发送简单的GET请求，并处理返回的响应。

#### 3.1 创建GET请求

首先，我们需要创建一个GET请求的实例。通过调用`axios.get()`方法来创建GET请求，并传入请求的URL。

axios.get(url)

#### 3.2 发送GET请求

创建GET请求实例后，我们需要发送请求到服务器。Axios提供了`.then()`方法和`.catch()`方法用于处理请求成功和失败的情况。

axios.get(url)
  .then(function(response) {
    // 请求成功时的处理逻辑
  })
  .catch(function(error) {
    // 请求失败时的处理逻辑
  });

例如，我们要发送一个GET请求到`https://api.example.com/users`来获取用户信息，可以这样写代码：

axios.get('https://api.example.com/users')
  .then(function(response) {
    console.log(response.data); // 打印响应数据
  })
  .catch(function(error) {
    console.error(error); // 打印错误信息
  });

#### 3.3 处理响应

在请求成功后，服务器会返回响应数据。我们可以通过`response`对象来获取返回的数据。常用的属性有`data`、`status`和`headers`。

- `response.data`: 响应数据，可以通过`response.data`来获取。
- `response.status`: HTTP状态码，可以通过`response.status`来获取。
- `response.headers`: 响应头，可以通过`response.headers`来获取。

以下是完整的示例代码：

axios.get('https://api.example.com/users')
  .then(function(response) {
    console.log(response.data); // 打印响应数据
    console.log(response.status); // 打印状态码
    console.log(response.headers); // 打印响应头
  })
  .catch(function(error) {
    console.error(error); // 打印错误信息
  });

以上是使用Axios发送简单GET请求的基本操作。接下来，我们将介绍如何传递参数和构建查询字符串来满足更复杂的请求需求。

# 4. 参数和查询字符串

在实际开发中，经常需要通过GET请求传递参数或构建查询字符串。Axios提供了便捷的方法来处理这些情况，让我们一起来看看应该如何处理参数和查询字符串。

#### 4.1 传递参数

要在GET请求中传递参数，可以将参数直接附加到URL后面。Axios允许我们将参数作为config对象的一部分传递，或者直接在URL中拼接。

// 将参数作为config对象的一部分传递
axios.get('/api/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

// 或者直接在URL中拼接
axios.get('/api/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

#### 4.2 构建查询字符串

如果需要以查询字符串的形式传递多个参数，可以使用`qs`库来帮助构建查询字符串。

const qs = require('qs');

const params = {
  foo: 'bar',
  baz: ['qux', 'quux'],
  corge: ''
};

const queryString = qs.stringify(params);
console.log(queryString);
// Output: foo=bar&baz%5B0%5D=qux&baz%5B1%5D=quux&corge=

#### 4.3 解析查询字符串

同样，如果需要解析URL中的查询字符串，可以使用`qs`库来进行解析。

const qs = require('qs');

const parsed = qs.parse('foo=bar&baz%5B0%5D=qux&baz%5B1%5D=quux&corge=');
console.log(parsed);
/*
Output: 
{
  foo: 'bar',
  baz: ['qux', 'quux'],
  corge: ''
}
*/

在处理参数和查询字符串时，使用Axios可以让我们更轻松地处理GET请求中的数据传递和解析。

# 5. 错误处理和异常情况

在使用Axios发送GET请求时，我们需要考虑网络错误、HTTP状态码以及请求超时等异常情况的处理。下面将详细介绍如何处理这些错误和异常情况。

#### 5.1 处理网络错误

在实际应用中，网络错误是一个常见的问题。Axios允许我们通过`.catch`方法捕获网络错误，并对其进行处理。

axios.get('https://example.com/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回状态码在 2xx 范围之外
      console.log('服务器返回错误：', error.response.data);
      console.log('状态码：', error.response.status);
    } else if (error.request) {
      // 请求已发送但没有收到响应
      console.log('请求错误：', error.request);
    } else {
      // 其他错误
      console.log('错误：', error.message);
    }
  });

#### 5.2 处理HTTP状态码

我们可以根据HTTP状态码来处理不同的情况，比如重定向、客户端错误或服务器错误。

axios.get('https://example.com/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (error.response) {
      if (error.response.status === 404) {
        console.log('资源未找到');
      } else if (error.response.status === 500) {
        console.log('服务器内部错误');
      } else {
        console.log('其他HTTP错误，状态码：', error.response.status);
      }
    }
  });

#### 5.3 处理请求超时

使用Axios可以设置请求超时时间，并对请求超时进行处理。

axios.get('https://example.com/api/data', { timeout: 5000 })
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('请求超时');
    }
  });

以上就是如何处理Axios发送GET请求时的错误和异常情况。处理这些情况可以让我们的应用更加健壮，并为用户提供更好的体验。

# 6. 高级用法和其他功能

在本章中，我们将讨论如何使用Axios的一些高级功能以及其他特性，这些功能可以帮助我们更好地处理复杂的网络请求和响应。

#### 6.1 自定义请求头

有时候，我们需要在请求中添加自定义的请求头信息，例如身份认证、授权等。Axios允许我们轻松地添加自定义请求头。下面是一个示例：

axios.get('/user', {
  headers: {
    'Authorization': 'Bearer token123'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们通过`headers`字段添加了一个自定义的`Authorization`头部，值为`Bearer token123`。

#### 6.2 使用拦截器

Axios拦截器允许我们在请求或响应被 then 或 catch 处理之前对它们进行拦截和处理。这在对请求或响应进行全局的预处理时非常有用。下面是一个使用拦截器的示例：

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    console.log('请求发送前的拦截器', config);
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    console.log('收到响应后的拦截器', response);
    return response;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

在这个示例中，我们分别添加了请求拦截器和响应拦截器，可以在拦截器中对请求或响应进行额外的逻辑处理。

#### 6.3 并发请求

有些情况下，我们可能需要同时发送多个请求，并且在它们都完成后执行一些操作。Axios提供了并发请求的功能来处理这种情况。下面是一个使用并发请求功能的示例：

axios.all([
  axios.get('/user/123'),
  axios.get('/user/456')
])
  .then(axios.spread((user1, user2) => {
    // 两个请求现在都执行完成
    console.log('用户1', user1.data);
    console.log('用户2', user2.data);
  }))
  .catch(error => {
    console.error(error);
  });

在这个示例中，我们使用`axios.all`方法同时发起了两个请求，然后通过`axios.spread`方法在两个请求都完成后对它们的结果进行处理。

以上就是Axios的一些高级用法和其他功能，这些功能可以帮助我们更好地处理复杂的网络请求和响应。