//src 底下建立 api 文件夹
// api 文件夹下建立 request,js 文件，文件内容复制下面这段代码即可
/**
* ajax请求配置
*/
import axios from 'axios'
import { Message } from 'element-ui'
// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
// 整理数据 --- 可要可不要，这个问题不大，无所谓
// axios.defaults.transformRequest = function(data) {
// data = JSON.stringify(data)
// return data
// }
// 定义请求头 使用JSON格式
axios.defaults.baseURL = 'apis/api/'
axios.defaults.headers.post //post 要单独设置,下面的 api.js 会说明
axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'
axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'
// 路由请求拦截
axios.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded; multipart/form-data'
config.headers['Authorization'] = 'Bearer '+ window.localStorage.getItem('access_token')
config.headers['Accept'] = 'application/json'
return config
},
error => {
return Promise.reject(error.response)
}
)
// 路由响应拦截
axios.interceptors.response.use(
response => {
if(response.status === 401){ // token过期
Message.error(response.data.errDesc)
window.localStorage.removeItem('access_token');
router.replace({
path: '/', //返回登录页重新登录
query: {
redirect: router.currentRoute.fullPath
}
})
}else{
return response.data
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
}
)
export default axios
// 和 request.js 同层 建立 api.js（由于是一个人开发，所以只建立一个 api.js，可以根据自己需要把 request.js 导入到自己需要的 api.js 的文件中去）
//统一封装api请求
import request from '../api/request'
import axios from 'axios' // 可以自行手写的 axios 请求
import qs from 'qs' // 可以用于转换 post 需要的 fromData 格式
import url from 'postcss-url';
// 导出接口
export function 接口名字( 传给后端的接口参数 ) {
return request({
url: ' ',//接口路径
method: 'post', //请求方式
//转换数据格式 --- 这段代码很关键，用于转换post 的fromData 格式的
transformRequest: [
function(data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
return ret;
}
],
// 头部必须设置是 fromData 格式，不然会报错
headers:{
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
// 接口数据 - 上面括号传过来的数据
data : {
}
})
}
// vue 文件中的使用
script 中
import { 上面定义的接口名字 } from ' 自己定义的 api.js 的文件路径 '
export default{
methods: {
自己定义一个方法名字用于调用(传给后台的参数： 例如 ： 分页，搜索框 ){
api.js 的 方法名字 ( 这里是传入 api.js 的方法中的参数 ).then(res=>{
接收数据
}).catch(()=>{
this.$message.error(" 数据发生错误的时候的提示 ")
})
},
}
}