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

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更加易于维护,而且更加直观。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue3中axios请求封装、请求拦截与相应拦截详解 - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • sql中lag和over函数的意义

    以下是SQL中LAG和OVER函数的详细攻略: SQL中LAG和OVER函数的意义 在SQL中,LAG和OVER函数是两个非常有用的函数,它们可以帮助我们查询结果中获取前一或后一行的数据,或者对整个结果集进行聚合计算。以下是LAG和OVER函数的详细说明 1. LAG LAG函数用于获取前一行的数据。以下是LAG函数的语法: LAG(column, offs…

    other 2023年5月7日
    00
  • go环境变量配置(goroot和gopath)

    go环境变量配置(goroot和gopath) Go语言是一门开发高并发、高可靠性、高性能程序的语言,近年来越来越受到开发者的青睐。在进行Go开发之前,需要先进行go环境变量的配置。本文将详细介绍Go环境变量配置步骤,其中包括goroot和gopath的配置。 goroot goroot是指go的安装目录。在使用Go语言开发之前,需要先安装Go语言。安装Go…

    其他 2023年3月28日
    00
  • centos7安装搭建ftp服务器(最简便方法)

    CentOS7安装搭建FTP服务器(最简便方法) FTP(File Transfer Protocol),即文件传输协议,是在计算机之间进行文件传输的一套标准,早期是互联网上用于文件传输的主要协议之一。在本文中,我们将介绍如何在CentOS7操作系统上使用最简便的方法来安装和搭建FTP服务器。 环境准备 在开始安装FTP服务器之前,需要准备以下环境: 一台安…

    其他 2023年3月28日
    00
  • 电脑无故重新启动的一个解决办法(硬件篇)

    电脑无故重新启动的一个解决办法(硬件篇) 背景 在日常使用电脑的过程中,有可能会遇到电脑无故重新启动的问题,经常出现这种现象会影响到工作和学习。而导致电脑无故重新启动的原因可能有很多,其中硬件问题是比较常见的一种。 解决办法 步骤一:排查电源问题 获取一台稳定的电源,将其接到电脑中并测试电脑是否重启。 在电脑自带的电源设备中查看是否有变形、损坏等问题。 针对…

    other 2023年6月27日
    00
  • python编写mqtt的客户端

    以下是关于“Python编写MQTT客户端”的完整攻略,包含两个示例说明。 什么是MQTT MQTT是一种轻量级的消息传递协议,它可以在低带宽和不稳定的网络环境下使用。MQTT协议使用发布/订阅模式,其中客户端可以发布消息到主题,其他客户端可以订阅该主题以接收消息。 Python中的MQTT客户端 Python中有许多MQTT客户端库可供使用,其中最流行的是…

    other 2023年5月9日
    00
  • android杂记:C++文件的添加log方法分享

    下面我来详细讲解一下“android杂记:C++文件的添加log方法分享”的完整攻略。 前言 Android应用开发中使用C++的情况较为普遍。在C++中添加日志系统,可以方便开发者查看和追踪程序的执行情况,甚至可以用于分析程序的性能和错误。本篇文章将分享如何在C++的文件中添加日志输出的方法,在Android开发中更加便捷地使用C++。 步骤 步骤一:添加…

    other 2023年6月26日
    00
  • C语言逻辑运算符知识整理

    C语言逻辑运算符知识整理 什么是逻辑运算符? 逻辑运算符是C语言中用于进行逻辑运算的一组运算符。包括逻辑与运算符、逻辑或运算符和逻辑非运算符。逻辑运算符常用于条件语句和循环语句中,用于控制程序的流程。 逻辑与运算符(&&) 逻辑与运算符是C语言中用于进行逻辑与运算的运算符,用于当多个条件都成立时,整个条件表达式才会成立。 例如,以下代码中仅当…

    other 2023年6月27日
    00
  • java递归设置层级菜单的实现

    Java递归设置层级菜单的实现,可以通过以下几个步骤来完成: 设计数据模型 首先需要设计数据模型,以便存储菜单的信息。这里我们可以使用一个Menu类来表示菜单,它包含以下几个属性: id:菜单的唯一标识符。 name:菜单名称。 parentId:菜单的父节点标识符,如果为0表示该菜单是顶级菜单。 children:菜单的子节点列表,如果没有子节点则为nul…

    other 2023年6月27日
    00
合作推广
合作推广
分享本页
返回顶部