使用axios发起get请求

引言

在前端开发中，经常需要从服务器获取数据。而使用axios发起GET请求是一种常见的方式。本文将指导你如何使用axios来发起GET请求。

流程图

graph TD
A[开始] --> B[引入axios库]
B --> C[创建axios实例]
C --> D[发起GET请求]
D --> E[处理响应结果]
E --> F[结束]

步骤详解

1. 引入axios库

首先，在你的项目中引入axios库。你可以通过以下代码将axios库引入到你的HTML文件中：

<script src="

或者，在你的JavaScript文件中使用npm安装axios：

npm install axios

然后，在你的JavaScript文件中使用import语句引入axios库：

import axios from 'axios';

2. 创建axios实例

在使用axios发送请求之前，我们需要先创建一个axios实例。通过创建axios实例，我们可以配置一些全局的默认设置，例如请求的基本URL、请求头等。以下是创建axios实例的示例代码：

const instance = axios.create({
  baseURL: '
  timeout: 5000,
  headers: {'Authorization': 'Bearer ' + token}
});
  • baseURL：设置请求的基本URL，即请求的目标服务器地址。
  • timeout：设置请求超时时间，单位为毫秒。
  • headers：设置请求头，例如在请求中添加Token。

3. 发起GET请求

一旦我们创建了axios实例，就可以使用该实例来发起GET请求了。以下是使用axios实例发起GET请求的示例代码：

instance.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
  • get(url)：使用GET方法发送请求，url为请求的相对路径，会与baseURL拼接成完整的请求URL。
  • then(response)：当请求成功时，会调用then方法，并将响应结果作为参数传入回调函数中。
  • catch(error)：当请求失败时，会调用catch方法，并将错误信息作为参数传入回调函数中。

4. 处理响应结果

在上一步中，我们使用了then方法来处理请求成功的响应结果。你可以根据实际需要对响应结果进行处理，例如将数据渲染到页面上。以下是一个简单的示例代码：

instance.get('/api/data')
  .then(response => {
    const data = response.data;
    // 处理响应结果，例如将数据渲染到页面上
    renderData(data);
  })
  .catch(error => {
    console.error(error);
  });
  • response.data：响应结果的数据部分，可以通过response.data来访问。

结论

通过以上步骤，你已经学会了如何使用axios发起GET请求。首先，你需要引入axios库；然后，创建axios实例，并配置一些全局的默认设置；最后，使用axios实例发起GET请求，并处理响应结果。希望本文能对你有所帮助！