封装使用Axios进行前后端交互

Axios是一个强大的HTTP客户端，用于在Vue.js应用中进行前后端数据交互。本文将介绍如何在Vue中使用Axios，并通过一个企业应用场景来演示其实际应用。

Axios简介

公众号：Code程序人生，个人网站：https://creatorblog.cn

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Nodejs中使用。它具有以下特点：

• 支持Promise API，易于使用和集成。
• 提供了强大的拦截器，用于在请求和响应过程中执行自定义逻辑。
• 具有自动转换JSON数据的能力。
• 能够处理请求和响应的取消操作。
• 支持浏览器环境和Nodejs环境。

大家要有一个概念，Axios是一个独立的库，不依赖于任何框架，Vue、React、Nodejs、原生，任何能用它的地方都可以用它。很多初学者有种错觉，认为Vue和Axios强挂钩。Axios是一个很强大的第三方库，不依赖于任何主体。

Axios基本用法

安装Axios

首先，确保你的项目中已经安装了Axios。如果没有安装，可以使用以下命令进行安装：

npm install axios
1

发送GET请求

以下是一个简单的Vue组件方法，用于发送GET请求并处理响应：

<template>
  <div>
    <button @click="fetchData">获取数据button>
    <div>{{ responseData }}div>
  div>
template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      responseData: null,
    };
  },
  methods: {
    fetchData() {
      axios
        .get('https://www.baidu.com', {
            params: {
                query1: 'query1value1',
                query2: 'query2value2',
              }
            },
            headers: {
                'Authorization': 'Bearer token',
            }
        )
        .then((response) => {
          this.responseData = response.data;
        })
        .catch((error) => {
          console.error('请求失败:', error);
        });
    },
  },
};
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

axios.get()的入参：

• 第一个参数是要请求的url，必填。
• 第二个参数是要传递的配置对象config，用于设置请求的各种选项，例如请求头、请求参数、超时设置等，GET请求要传递的query参数要放到params属性下，选填。

在上述示例中，我们导入了Axios并使用axios.get()方法发送GET请求。响应数据存储在responseData中。

发送POST请求

如果需要发送POST请求，可以使用axios.post()方法：

<script>
import axios from 'axios';

export default {
  // ...其他组件选项

  methods: {
    sendData() {
      const params = {
        key1: 'value1',
        key2: 'value2',
      };

      axios
        .post('https://your-post-api-url', params, {
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then((response) => {
          console.log('成功发送数据:', response.data);
        })
        .catch((error) => {
          console.error('请求失败:', error);
        });
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

axios.post()的入参：

• 第一个参数是要请求的url，必填。
• 第二个参数data，表示要发送的请求数据。通常在向服务器提交数据时使用，例如表单数据或JSON数据，选填。
• 第三个参数config，用于设置请求的各种选项，比如headers等，选填。

上述示例中，我们使用axios.post()发送POST请求，同时传递了需要发送的数据对象。

Axios的进阶用法

拦截器

Axios的拦截器功能允许我们在请求发送前和响应返回后执行自定义操作。例如，你可以在请求中添加认证信息、记录日志等。以下是一个示例：

// 添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 在请求发送前执行的操作，例如添加认证信息
    // config.headers['Authorization'] = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 在响应返回后执行的操作，例如处理响应数据
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

错误处理

在Axios中，你可以使用.catch()来处理请求或响应的错误。通常，这包括网络错误、HTTP状态码错误以及后端返回的自定义错误信息。

axios
  .get('https://www.baidu.com')
  .then((response) => {
    // 处理成功响应
  })
  .catch((error) => {
    if (error.response) {
      // 处理HTTP错误状态码
      console.error('HTTP错误:', error.response.status);
    } else if (error.request) {
      // 处理请求没有响应的情况
      console.error('请求无响应');
    } else {
      // 处理其他错误
      console.error('其他错误:', error.message);
    }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Axios整体封装

为什么要封装Axios

封装Axios有以下几个重要的原因：

1. 代码重用性：通过封装Axios，我们可以将HTTP请求的逻辑集中在一个地方，以便在整个应用程序中重用。
2. 错误处理：封装可以使错误处理变得更加一致，包括网络错误、HTTP状态码错误以及后端返回的自定义错误信息。
3. 拦截器：Axios的拦截器功能可以用于在请求发送前和响应返回后进行操作，如添加请求头、认证、日志记录等。
4. 安全性：通过封装，可以更容易地添加安全性措施，例如CSRF令牌的自动附加。

封装Axios

首先，我们将创建一个独立的Axios实例并进行封装。在Vue项目中，通常在一个单独的文件中完成此任务，例如axios.js：

// axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.api.api.com', // 设置后端API的基本URL
  timeout: 10000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送前可以进行一些操作，如添加认证信息
    // config.headers['Authorization'] = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在响应返回后可以进行一些操作，如处理响应数据
    return response.data;
  },
  (error) => {
    // 处理响应错误，可以根据不同的HTTP状态码采取不同的处理策略
    if (error.response) {
      // 处理HTTP错误状态码
      const status = error.response.status;
      if (status === 401) {
        // 处理未授权错误
      } else if (status === 404) {
        // 处理资源未找到错误
      } else {
        // 处理其他HTTP错误
      }
    } else if (error.request) {
      // 处理请求没有响应的情况
    } else {
      // 处理其他错误
    }
    return Promise.reject(error);
  }
);

export default instance;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

在Vue组件中使用封装的Axios

现在，我们可以在Vue组件中轻松地使用封装后的Axios实例。首先，确保在组件文件中导入封装的Axios：

import axios from './axios'; // 导入封装的Axios实例
1

然后，在组件中使用Axios发送请求：

export default {
  methods: {
    fetchData() {
      axios
        .get('/data') // 发送GET请求，'/data'是相对于基本URL的相对路径
        .then((response) => {
          // 处理响应数据
        })
        .catch((error) => {
          // 处理错误
        });
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这是一个简单的示例，展示了如何在Vue组件中使用封装的Axios实例来发送GET请求。

常见应用场景

身份验证和授权

在企业应用中，常见的用例之一是处理身份验证和授权。你可以在Axios的拦截器中添加认证信息，以确保只有授权用户可以访问受保护的资源。

错误处理和日志记录

企业级应用通常需要良好的错误处理和日志记录机制。通过Axios的拦截器，你可以集中处理错误，记录错误信息，以便后续分析和修复。

文件上传和下载

对于文件上传和下载，Axios同样适用。你可以使用axios.post()来上传文件，使用axios.get()来下载文件，并处理相应的响应数据。

总结

Axios是一个功能强大的HTTP客户端，可以帮助你在任何应用中进行前后端数据交互。

通过封装和使用Axios，你可以更轻松地处理请求、响应、错误和拦截器等各方面的问题。

在企业应用中，它可以帮助你构建稳健和可维护的前端代码，以应对复杂的需求和场景。