vue项目实战之优雅使用axios vue项目实战之优雅使用axios

axios传参

params与data传参

封装axios

总结

axios传参
params与data传参

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

【vue项目实战之优雅使用axios】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 = "https://www.it610.com/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 = "https://www.it610.com/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 => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (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 = 'https://www.it610.com/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

使用