logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端编程3
前端基础知识16
UniApp15
Vue框架19
Java编程7
Java基础知识14
SpringBoot31
SpringMVC14
MyBatis8
SpringCloud15
RocketMQ1
MyCat1
数据库4
MySQL6
Redis7
MongoDB10
H21
Java技术栈4
知识整理分布式锁的实现方案MySQL事务MySQL的锁
软件工具箱14
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaPicGoRustFSVSCodeDockerObsidianObs录制
Linux知识11
树莓派安装及使用ArchLinux:常用软件ArchLinux:基础系统安装ArchLinux:深度优化ArchLInux:图形化界面安装ArchLinux:Nirifrp内网穿透Jar启动脚本Linux常用命令VirtualBox安装CentOSVirtualBox安装Ubuntu
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

描述

Axios是Vue官方推荐的HTTP请求工具,封装了所有的请求方式和相关的功能,如拦截器等配置,但是默认发送的头部是application/jsonform-data提交需要在请求中进行配置

实现

使用Qs在拦截器中进行统一的数据格式转换

npm install qs

在拦截器中配置

import Qs from 'qs'

// axios配置
const $axios = axios.create({
  baseURL: api,
  timeout: 1000 * 30, // 请求超时,秒
  // 携带cookie
  withCredentials: true,
  headers: {'content-type': 'application/x-www-form-urlencoded'} // 请求数据类型 默认application/json
})

// 请求拦截器
$axios.interceptors.request.use(config => {
  config.data = Qs.stringify(config.data)
  return config;
}, function (error) {
  // 请求错误的执行
  return Promise.reject(error);
});

Vue.prototype.axios = $axios
描述
实现