一、配置选项对象
在config文件夹里面的index.js文件里的 module.exports 的 dev 下面的proxyTable
proxyTable: { //跨域代理
"/api":{ //地址
target:"http://admintest.happymmall.com/manage", //基地址
changeOrigin:true,//允许转发
pathRewrite:{ //路径重写
"^/api":""
}
}
},
axios的二次封装 封装成一个公共的函数 公布出来 函数返回一个promise对象 在promise对象resolve返回接口数据
utils目录下 request.js
前提理解 axios({可配置选项对象})
import axios from "axios"
// axios的二次封装 封装成一个公共的函数 公布出来 函数返回一个promise对象
const service = axios.create({
//如果配制了选项对象 这里就可以 不用写了
// baseURL:'/api',
// timeout:3000
})
// axios拦截器 请求拦截 响应拦截
service.interceptors.request.use((config) =>{
// // 判断登录成功 请求头中添加token
// if (store.getters.token) {
// // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
// config.headers['token']
// }
return config
})
service.interceptors.response.use((config) =>{
//响应拦截的具体逻辑
return config
})
// 封装成一个公共的函数 公布出来 函数返回一个promise对象
// params 是形参对象 接收的是实参-对象
let Request = (params) =>{
// console.log(params)
return new Promise((resolve,reject) =>{
// axios({
// url: baseURL+url,
// method: "get" || "post" ,
// // get传参
// params:{
// username:"admin",
// passwrod:"admin"
// },
// //post传参
// data:{
// username:"admin",
// passwrod:"admin"
// }
// })
service({
...params //es6中对象解构赋值
}).then((res) =>{
// console.log(res)
resolve(res)
}).catch((err) =>{
reject(err)
})
})
}
export { Request}
三、封装接口
在另一个js文件里 首先需要引入
import { Request } from "../utils/request"
统一的接口配置文件: 便于后期的修改、维护
// 登录接口;
//有数据的方式
export const login = (obj) => Request({
url: "/api/user/login.do",
method:"post",
params:obj
})
// 主页数据
//没有数据 就可以这样
export const home = () => Request({
url: "/api/statistic/base_count.do",
method:"get",
})