Vue3中axios请求封装、请求拦截与相应拦截详解

Axios是一个基于Promise的HTTP客户端，可以运行在浏览器和node.js中。它端口良好的API，比原生的XHR更加易用和灵活。在Vue3中，我们可以使用axios来发起HTTP请求并将其封装成一个单独的模块，在需要请求数据的组件中调用。

安装与引入

我们可以使用npm来安装axios：

npm install axios

在需要使用axios的Vue组件中引入它：

import axios from 'axios'

封装请求

在将axios封装为一个单独的模块前，我们需要考虑以下几点：

• 按照RESTful API进行划分和请求方法的封装
• 在每个请求之前添加一个请求拦截器
• 在每个请求完成之后添加一个响应拦截器

下面我们来编写一个API模块，用来处理所有针对某个API的HTTP请求：

import axios from 'axios';

export default {
  // 获取所有文章
  getArticles() {
    return axios.get('/api/articles');
  },

  // 创建新文章
  createArticle(data) {
    return axios.post('/api/articles', data);
  },

  // 获取单个文章
  getArticle(id) {
    return axios.get(`/api/articles/${id}`);
  },

  // 更新单个文章
  updateArticle(id, data) {
    return axios.patch(`/api/articles/${id}`, data);
  },

  // 删除单个文章
  deleteArticle(id) {
    return axios.delete(`/api/articles/${id}`);
  }
}

在这个模块中，我们将每个API请求方法进行了封装，并按照RESTful API的规范进行划分。

请求拦截器

在每个请求之前，我们要添加一个请求拦截器。这个拦截器可以用于在发送请求之前进行一些操作，例如在请求头中添加token：

import axios from 'axios';
import store from '@/store';

const api = axios.create({
  baseURL: 'http://localhost:3000',
  headers: { 'Content-Type': 'application/json' }
});

api.interceptors.request.use(
  (config) => {
    const token = store.getters['auth/token'];

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

在这个例子中，我们通过store来获取我们的token，并将其添加到请求头中。

响应拦截器

在每个请求完成之后，我们要添加一个响应拦截器。这个拦截器可以用于在接收到响应之后进行一些操作，例如在收到401错误码的响应时，跳转到登录页面：

import axios from 'axios';
import router from '@/router';

const api = axios.create({
  baseURL: 'http://localhost:3000',
  headers: { 'Content-Type': 'application/json' }
});

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      router.push({ name: 'Login' });
    }

    return Promise.reject(error);
  }
);

export default api;

在这个例子中，我们判断了返回的错误码是否为401，如果是的话就跳转到登录页面。

示例

下面是一个在Vue3中使用修改文章的示例：

import api from '@/api';

export default {
  name: 'Article',
  data() {
    return {
      article: {},
      title: '',
      content: ''
    };
  },
  methods: {
    updateArticle() {
      const data = {
        title: this.title,
        content: this.content
      };

      api.updateArticle(this.article.id, data)
        .then(() => this.$router.push({ name: 'ArticleList' }));
    }
  },
  created() {
    api.getArticle(this.$route.params.id)
      .then((response) => this.article = response.data);
  }
};

在这个组件中，我们使用了getArticle方法来获取文章的信息，然后将其存储在组件的data对象中。当我们需要更新文章时，我们调用updateArticle方法，并给它传递新的文章标题和内容，然后在成功响应之后，使用router实例来导航回文章列表页面。

总结

现在你应该了解如何在Vue3中使用axios来封装HTTP请求，并在每个请求之前添加请求拦截器，在每个请求完成之后添加响应拦截器。在实践中，请确保按照RESTful API的规范进行请求方法的划分，这样可以使整个API更加易于维护，而且更加直观。