[项目经验]——vue优雅使用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’

}

1. 直接拼接成k=v

适用参数较少的情况

export function login(account, password, orgType) {return request({

url: ‘/webapi/login’,

method: ‘post’,

data: “loginId=”+account+ “&password=”+password+“&orgType=”+orgType

})

}

2. 使用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) {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！