掌握axios与Vue 3：构建高效HTTP请求的终极指南

最新推荐文章于 2024-08-25 00:47:25 发布

卓卓没头发

最新推荐文章于 2024-08-25 00:47:25 发布

阅读量1.1k

点赞数 23

分类专栏： Vue学习心得文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/a3098448071/article/details/140363030

版权

Vue学习心得专栏收录该内容

27 篇文章 0 订阅

订阅专栏

引言

axios作为一个广泛使用的JavaScript库，因其简洁的API、强大的功能和良好的浏览器兼容性，成为了许多前端开发者在Vue 3项目中的首选。

axios简介

axios是什么？

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境中。它允许开发者以一种简洁的方式发送异步HTTP请求到REST endpoints，并处理响应。axios支持请求和响应拦截器、自动转换JSON数据、客户端支持防御XSRF等特性。

axios的主要特点和优势

基于Promise：axios使用Promise，这是现代JavaScript中处理异步操作的标准方式。
浏览器和Node.js兼容：axios可以在前端和后端环境中使用，方便前后端代码共享。
请求和响应拦截器：可以添加拦截器来处理请求或响应，例如添加认证令牌、日志记录等。
自动转换JSON数据：axios会自动将JSON字符串转换为JavaScript对象，反之亦然。
支持请求取消：可以取消正在进行的请求。
支持请求和响应的配置：可以对请求和响应进行详细的配置，如超时设置、自定义HTTP头等。

axios的基本使用方法（GET、POST请求示例）

GET请求示例：

// 使用axios发送GET请求
axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.error(error);
  });

POST请求示例：

// 使用axios发送POST请求
axios.post('https://api.example.com/data', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.error(error);
  });

在这些示例中，我们使用了axios的.get()和.post()方法来发送GET和POST请求。每个方法都返回一个Promise对象，该对象在请求成功时解决，并在请求失败时拒绝。通过.then()和.catch()方法，我们可以处理成功的响应和错误情况。

这些基本的使用方法是axios的核心，通过它们，开发者可以轻松地在Vue 3应用中实现与后端服务的交互。

安装和配置axios

1.使用npm安装axios：

npm install axios

2.或者使用yarn安装axios：

yarn add axios

3.同样可以通过pnpm来安装axios。但是我们首先确保项目中已经安装了pnpm。如果还没有安装，可以通过npm或yarn来安装pnpm：

npm install -g pnpm

或者

yarn global add pnpm

安装完成后，你可以使用pnpm来安装axios：

pnpm add axios

实战阶段

我们可以将封装好的HTTP请求模块命名为request.js，并使用request作为导入的别名。以下是创建一个名为request.js的封装好的HTTP请求模块的示例：

// request.js
import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // API的基础URL
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以添加一些请求前的操作，例如添加token
    return config;
  },
  error => {
    // 请求错误处理
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 响应错误处理
    console.error('Response Error:', error);
    return Promise.reject(error);
  }
);

export default service;

然后，在你的Vue 3组件中，你可以通过导入上面创建的request.js模块来发送HTTP请求：

// MyComponent.vue
<script setup>
import { ref } from 'vue';
import request from './request'; // 假设request.js位于同一目录下

const fetchData = async () => {
  try {
    const response = await request.get('/some-endpoint');
    // 处理响应数据
    console.log(response);
  } catch (error) {
    // 处理错误
    console.error('Error fetching data:', error);
  }
};

// 调用fetchData以获取数据
fetchData();
</script>

在这个示例中，我们使用request作为导入的别名，这样在调用请求方法时，代码更加简洁明了。通过这种方式，你可以轻松地在多个组件中重用HTTP请求逻辑，同时保持代码的清晰和组织性。此外，你还可以根据需要进一步封装更多的请求方法（如POST、PUT、DELETE等），以及添加更多的配置和错误处理逻辑。

请求和响应拦截器的高级配置（以pinia为例子）

在Pinia中获取token

首先，确保您已经在Pinia中定义了相应的store，并且该store中包含了token。例如：

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: null,
  }),
  actions: {
    setToken(newToken) {
      this.token = newToken;
      localStorage.setItem('token', newToken);
    },
    removeToken() {
      this.token = null;
      localStorage.removeItem('token');
    },
  },
});

然后，在请求拦截器中，您可以从Pinia的store中获取token并添加到请求头中：

// request.js
import axios from 'axios';
import { useAuthStore } from '../stores/auth'; // 假设您的Pinia store文件位于此路径

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  config => {
    const authStore = useAuthStore();
    const token = authStore.token;
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

export default service;

在响应拦截器中进行数据转换、错误重试等操作

响应拦截器可以用来处理服务器返回的数据，例如转换数据格式或处理特定的错误。以下是如何在响应拦截器中进行数据转换和错误重试的示例：

// request.js
// ...之前的代码

service.interceptors.response.use(
  response => {
    // 假设服务器返回的数据格式为JSON，且包含data字段
    const data = response.data;
    // 可以根据需要对数据进行转换或处理
    return data;
  },
  error => {
    // 响应错误处理
    // 例如，如果响应状态码为401（未授权），则可能需要重新登录
    if (error.response && error.response.status === 401) {
      // 重定向到登录页面
      router.push('/login');
    }
    // 如果响应状态码为429（请求过多），则可以进行错误重试
    if (error.response && error.response.status === 429) {
      // 重试逻辑
      console.log('Request was rate limited, retrying...');
      // 可以在这里实现重试逻辑，例如使用递归调用或使用第三方库
    }
    return Promise.reject(error);
    //这行代码的意思是返回一个被拒绝的Promise对象，并将error作为拒绝的原因
  }
);

export default service;