讲师中心 微信公众号
AI工具推荐 视频效率加速

vue的axios的封装介绍(示例讲解)

夏杰吖_6827

夏杰吖_6827

发布时间:2019-01-17 10:08:24

|

3286人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于vue的之axios的封装介绍(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

18年初开始接触vue,最开始是使用的vue-resource,不过听说axios挺牛逼的,准备跳坑试试,毕竟vue-resource官方已经放弃维护了

4124124659537-5c3edc02ccae3_articlex.png

其中就是baseURL是我们后台接口的请求路劲(request的最后url=baseURL+axios的请求url)
 withCredentials 这个字段是让我们的请求携带cookie的信息,如果没有设置的话,默认的false,就会出现session丢失的情况,一直无法取到session里面的信息

328910628-5c3ede03a73c5_articlex.png

立即学习“前端免费学习笔记(深入)”;

1405077174-5c3ee8c81d998_articlex.png

request请求拦截器,在这里我们可以在做一些请求之前操作,对于某些请求,根据请求的携带过来的参数

javascript-pro
javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家,适用于现代开发

下载

(例如下面这个请求,就没有loading的效果)

138559622-5c3ee0348a06d_articlex.png

有些项目需要请求好几个后台服务,在请求拦截器这里直接更改request的baseURL就成。。
还有有些接口需要更改头部的信息,直接修改就成
 ps:这这里不得不吐槽下vue-resource 在请求拦截器里面更改头部所碰到的坑,想更改头部的信息,必须得先将emulateJSON 这个字段设为false 

3165691335-5c3ee277b8e78_articlex.png

axios的请求默认的headers的Content-Type为'application/x-www-form-urlencoded;charset=UTF-8'
post请求后端的 (后端框架ssm)Controller中@RequestParam取不到请求参数
这个时候对请求参数做qs.stringify()处理就好了或者要求后端改成从@RequestBody获取参数也成

当请求头部为application/json  无需对请求参数做任何处理
response 响应拦截器主要是对请求超时的情况做处理。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

40

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

40

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

20

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

40

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

20

2026.10.22

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

20

2026.10.22

PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

220

2026.10.22

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn