「从零开始的 Vue 3 系列」:第八章——深入解析 Axios 与拦截器的使用与封装

前言

本系列将从零开始,系统性地介绍 Vue 3 的常用 API,逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示,帮助大家掌握 Vue 3 的基础与进阶知识,最终具备独立搭建完整 Vue 3 项目的能力。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js。它提供了一系列功能,使得在 JavaScript 应用中发起 HTTP 请求变得简单和高效。

项目中搭建

使用 npm 或 yarn 安装 Axios:

cpp 复制代码
npm install axios
# 或者
yarn add axios

发送get\post请求

cpp 复制代码
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

拦截器

在 Vue 3 中,拦截器主要应用于 HTTP 请求和响应的处理,通常与 axios 结合使用。拦截器的作用是对请求和响应在发送或接收前进行预处理,常见的功能包括:添加全局的请求头、处理请求错误、统一处理响应数据和错误等。通过拦截器,我们可以在不修改业务代码的情况下,轻松实现这些功能。

Vue 3 中的常见拦截器功能包括:
  • 请求拦截器:在请求发送前,可以对请求配置进行修改,如添加 token,或进行参数的统一处理。
  • 响应拦截器:在收到响应后,可以对响应数据进行处理,或统一处理错误,提升代码的复用性。

拦截器常用于以下场景:

  1. 身份验证:自动为每个请求添加身份验证 token。
  2. 全局错误处理:捕获所有请求错误并集中处理。
  3. 据预处理:对响应数据进行格式化,简化业务逻辑。

实现封装优化:

新建文件utils,目录下新建request.js文件

cpp 复制代码
import axios from 'axios';

// 创建axios实例
const service = axios.create({
//设置请求路径
//这里设置后端服务的端口号
baseURL:"http://localhost:8080"
//接口响应时间
timeout:1000
})


//请求拦截器
service .interceptors.request.use(config => {
  // 在请求发送之前做些什么
  //config.headers是请求头,可以在这里携带token等等数据
  config.headers.Authorization = 'Bearer YOUR_TOKEN';
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

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

//将axios暴露出去
export default service

新建api.js文件,用于封装接口

cpp 复制代码
//引入封装的axios
impor service  from "../request"

//新建接口
const getList =()=>service.get("这里是你的接口请求",{params}//这里是携带的参数)
//将接口暴露出去,正常调用就行
  export default{
    getList
  }

Axios总结

  • Axios 基于 Promise 设计,支持异步请求处理,非常适合现代 JavaScript 应用。
  • 请求和响应拦截器:可以在请求或响应被 then 或 catch 处理前进行拦截和修改。
  • 自动转换 JSON 数据:自动将请求和响应的数据格式转换为 JSON。
  • 取消请求:支持请求取消功能。
  • 客户端支持防御 XSRF:提供 XSRF 防护功能。
ps:以上内容仅为本人对 vue3的个人理解,如有不足之处,欢迎大家指正与交流,共同进步。
相关推荐
前端小小王5 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发15 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀37 分钟前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻3 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云3 小时前
npm淘宝镜像
前端·npm·node.js
dz88i83 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook