第一步:在src下面新建utils文件夹,新建个request.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改
import store from '../store'
**封装api,能有啥秘技,就皮一下,吼,很开心**
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
/* baseURL: window.glod.baseApi, // api 的 base_url*/
timeout: 50000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
// config.headers['Content-Type'] = 'application/json'
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + store.getters.token
// 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为201-206的暂时定为正确 可结合自己业务进行修改
*/
const res = response
if (res.status < 200 || res.status > 299) {
Message({
message: res.statusText,
type: 'error',
duration: 5 * 1000
})
if (res.status === 401 || res.status === 403) {
MessageBox.confirm(
'你已被登出,可以取消继续留在该页面,或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('oidc/signOutOidc');
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
if (error.response) {
Message({
message: error.response.data.error.details,
type: 'error',
duration: 5 * 1000
})
console.log('err' + error.response.data) // for debug
} else {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
console.log('err' + error.message) // for debug
}
return Promise.reject(error)
}
)
export default service
第二步:在src下面新建api文件夹,新建api.js
import request from "@/utils/request";
import qs from 'qs' //qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。npm install qs
// get请求方式
export function getConsumeByPhone(query) {
return request({
url: `/v1_consume/getConsumeByPhone`,
method: "get",
params: query
});
}
// post请求方式
export function addLeaveMessage(query) {
return request({
url: `/v2_leave/addLeaveMessage`,
method: "post",
data: qs.stringify(query),
});
}
//delete请求方式
export function deleteByIdCard(id) {
return request({
url: `/card/deleteById/${id.id}/${id.updater}`,
method: "delete"
});
}
//下面说说data数据上传
//当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串
(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个
新的url。
export function getOpenId(query) {
return request({
url: `/v1_auth/getOpenId`,
method: "post",
data: qs.stringify(query),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
// data上传2
export function getCode(query) {
return request({
headers: {
'Content-Type': 'application/json'
},
url: `/v1_global/getCode`,
method: "post",
data: qs.stringify(query),
});
}
// **当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。
但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件
为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type
(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。**
export function upload(query) {
return request({
headers: {
'Content-Type': 'multipart/form-data'
},
url: `v1_global/upload`,
method: "post",
data: query
});
}
// data上传4
export function uploadFace(query) {
return request({
headers: {
'Content-Type': 'applic/v1_pFace/uploadFace'
},
url: `/v1_pFace/uploadFace`,
method: "post",
data: query
});
}
import { uploadFace } from ‘@/api/api’ vue语法其他页面使用方式! || echarts
上传二进制数据;它告诉我们传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法,的type属性必须是file。form里面的input的值以2进制的方式传过去,所以request就得不到值了。传输到你的servlet里是二进制数据,包括那个title,所以你用request.getParameter(“title”)是得不到值的,必须把数据再换为String的。
转载:https://blog.csdn.net/weixin_56947857/article/details/115908520
查看评论