🏳??🌈个人网站：code宝藏 👈，欢迎访问🎉🎉 🙏如果大家觉得博主写的还不错的话，可以点点关注，及时获取我的最新文章 🤝非常感谢大家的支持与点赞👍

文章目录 axios传参params与data传参 封装axios

axios传参 params与data传参

params 传参：参数以 k=v&k=v 格式放置在 url 中传递。

springboot后端可以使用@RequestParam注解接受请求，或者保证参数名跟k一样时也可以接收到

只要是使用params传参，无论是post请求还是get请求都是拼接都url中，此时的post请求也只是伪post请求

data传参：参数被放在请求体中。

后端必须使用@RequestBody来接收，否则会接收不到，因为axios默认传递的参数类型是application/json，会将其转成json格式。

举例：

vue中：

export function login(account, password, orgType) { return request({ url: '/webapi/login', method: 'post', data: {"loginId":account,"password":password,"orgType":orgType} )}

则会转成json格式放入请求体中

如果后端中想这样接收，是接收不到的，因为此时后端的接收格式是application/x-www-form-urlencoded

@PostMapping(value = "/login") public Result login(String loginId, String password, int orgType, HttpServletResponse response){ }

如果我们使用data传参，但后端不想使用@RequesBody的方式来接收，那怎么处理呢？

首先要设置请求头

headers: { //关键 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }

直接拼接成k=v

适用参数较少的情况

export function login(account, password, orgType) {return request({ url: '/webapi/login', method: 'post', data: "loginId="+account+ "&password="+password+"&orgType="+orgType }) }

使用qs实现 json 对象的 k=v 格式化

适用参数较多的情况 安装qs ： npm install qs

import qs form 'qs' export function login(account, password, orgType) { return request({ url: '/webapi/login', method: 'post', data: qs.stringify({"loginId":account, "password":password,"orgType":orgType}) }) }

这样后端就可以这样接收了：

@PostMapping(value = "/login") public Result login(String loginId, String password, int orgType, HttpServletResponse response){ } 封装axios 设置request拦截器，可以在这里添加token，这样每次发起请求时都会携带token了设置响应拦截器，根据后端的状态码进行相应处理，比如但发现token失效后，就跳转到登录页面等 import axios from 'axios' import { Notification, MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' import errorCode from '@/utils/errorCode' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' // 创建axios实例 const service = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: "http://localhost:8082", // 超时 timeout: 10000 }) // request拦截器 service.interceptors.request.use(config => { // 是否需要设置 token const isToken = (config.headers || {}).isToken === false if (getToken() && !isToken) { config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 } return config }, error => { console.log(error) Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(res => { // 未设置状态码则默认成功状态 const code = res.data.code || 200; // 获取错误信息 const msg = errorCode[code] || res.data.msg || errorCode['default'] if (code === 401) { MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' } ).then(() => { store.dispatch('LogOut').then(() => { location.href = '/index'; }) }).catch(() => {}); } else if (code === 500) { Message({ message: msg, type: 'error' }) return Promise.reject(new Error(msg)) } else if (code !== 200) { Notification.error({ title: msg }) return Promise.reject('error') } else { return res.data } }, error => { console.log('err' + error) let { message } = error; if (message == "Network Error") { message = "后端接口连接异常"; } else if (message.includes("timeout")) { message = "系统接口请求超时"; } else if (message.includes("Request failed with status code")) { message = "系统接口" + message.substr(message.length - 3) + "异常"; } Message({ message: message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service

使用

import request from './request' export function apiLogin(data){ return request({ url:'/user/login', method:'post', data:data }) }

参考链接： https://·/dw039/p/11104628.html

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。