首先在src下面新建一个utils的文件夹,在这个文件夹新建一个http.js文件 然后
http.js
import axios from 'axios'
// import qs from 'qs'
import { MessageBox, Message } from 'element-ui'
// const url = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : ''
const http = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// baseURL: "/api",
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
})
function getToken(){
return window.localStorage.getItem('token')
}
// 请求拦截器 这块拦截器配置请求头的
//有token, 请求形式 目前设置的是json传参 注释的部分是表单传参
// 和表单传参的转换 不设置会有问题 目前的项目你还没遇到过 你这快说的是哪里?下面不是存储token吗
//
http.interceptors.request.use(
config => {
// 在发送请求之前先做点事
if (getToken()) {
// 让每个请求都携带令牌
// ['X-Token']是自定义标头键
// 请根据实际情况进行修改
config.headers['Authorization'] = getToken()
}
//这里params 方法解构出来了 这样get post传参方式一样的写了
// config.method === 'post' && config.data.constructor !== FormData || config.method === 'put'
// ? config.data = qs.stringify({...config.data})
// : config.params = {...config.params};
// 设置json传参
config.headers['Accept'] = 'application/json'
config.headers['Content-Type'] = 'application/json'
//表单传参
// config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config
},
error => {
//报错处理 Promise方式处理
// do something with request error
// console.log(error) // for debug
return Promise.reject(error)
}
)
// 响应拦截器2部分 数据的处理
axios.interceptors.response.use(
response => {
//以前你公司的接口有传code 这边的接口没有判断请求正确用浏览器的状态码 status
const res = response.data
const code = response.status //200就是请求成功
res.code = code
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
// 配置统一格式传输
let success={
code:code,
data:res,
message:res.data.messge
}
if (code == 200) {
//.then()里面的数据
return Promise.resolve(success);
} else {
//.catch()里面的数据
return Promise.reject(res);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
//非请求成成功的部分 不是200 201 这种2开头的
error => {
//拦截器 拦截所有请求 统一处理错误
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
this.$message.error('登录过期,请重新登录');
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
this.$message.error('网络请求不存在');
break;
// 其他错误,直接抛出错误提示
default:
this.$message.error('error.response.data.message');
}
//500 505也可以在这里处理
// 但是一般写在路由里面了 5开头的是程序错误
return Promise.reject(error.response);
}
}
);
export default http
在src下面创建一个api的文件夹 然后里面新建一个js文件,例如 env.js
import http from '@/utils/http'
const url = '/data/list'
/* 新增 */
export function addData(data) {
return http({
url: url,
method: 'post',
data
})
}
/* 删除 */
export function deleteData(id) {
return http({
url: `${url}/${id}`,
method: 'delete',
})
}
/* 更新 */
export function updateData(data) {
return http({
url: `${url}/${data.id}`,
method: 'put',
data
})
}
/* 详情 */
export function getDataDetail({grade,category}) {
return http({
url: `${url}/${grade}/${category}`,
method: 'get'
})
}
/* 条件查询所有记录 */
export function getAllDatas(params) {
return http({
url: `${url}`,
method: 'get',
params
})
}
/* 搜索 */
const url1 = '/data/search'
export function searchDataWord(params) {
return http({
url: `${url1}/${params.src}`,
method: 'get',
})
}
export function searchData(params) {
return http({
url: `${url1}`,
method: 'get',
params
})
}
const url1 = '/users/regis/'
// data={ username:'lalal', mobile:'15830017765', password:'12345678', password2:'12345678' }
// 传过来就是这样数据
export function PostRegis(data) {
return http({
url: `${url1}`,
method: 'post',
data
})
}