axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中,下面这篇文章主要给大家介绍了关于vue项目实战之优雅使用axios的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
目录
- 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://www.jb51.net/article/237137.htm
总结
到此这篇关于vue项目实战之优雅使用axios的文章就介绍到这了,更多相关vue优雅使用axios内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！
您可能感兴趣的文章:
- vue项目中使用axios上传图片等文件操作
- vue项目中axios使用详解
- 在vue项目中,使用axios跨域处理
- vue项目中axios请求网络接口封装的示例代码
- 如何在Vue项目中使用axios请求
- 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)
