1.封装请求
(1)utils->request.js
- 引入axios、token,定义请求头格式
- 定义基础路径
- 创建axios实例--配置路径
- 请求拦截器
- 响应拦截器
-
向外界暴露请求的基础路径和axios实例对象
import axios from 'axios'
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
//1.定义基础路径
const baseUrlLogin = 'http://192.168.3.54:8010';//dev2-login
const baseUrlOther = 'http://192.168.3.54:8011';//dev2-other
//2. 创建axios实例
const service = axios.create({
baseURL:baseUrlOther, //配置默认的baseURL
timeout: 30000,// 超时
})
//3. request请求拦截器(必须登录[含有token],才能发出请求)
service.interceptors.request.use(
config => {
//获取token,存在时设为请求头
//const token = window.sessionStorage.getItem("token")
//if(token){
//config.headers.Authorization = token
//}
//return config
if (getToken()) {
config.headers['tokenKey'] = "merchantToken"; // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['merchantToken'] =getToken();
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
// 4.响应拦截器--(处理返回的数据)
service.interceptors.response.use(response => {
// console.log(response);
// 对响应数据做点什么
let data = response.data;
let errorCode = data.code;
if (errorCode==200){//成功
return data;
} else if (errorCode == 401) {//token失效,会话过期
//移除token,即退出登录
//window.sessionStorage.removeItem("token")
vue.$store.dispatch("LogOut");
vue.$message.error("会话过期,请重新登陆");
return Promise.reject("会话过期");
}else {
return Promise.reject(data);
}
}, (error) => {
// 对响应错误做点什么
console.log(error);
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
vue.$message.error("服务器异常,请稍后重试");
return Promise.reject('服务器异常,请稍后重试');
} else {
// Something happened in setting up the request that triggered an Error
vue.$message.error("网络异常,请稍后重试");
return Promise.reject('网络异常,请稍后重试');
}
}
)
//5.向外界暴露
export {baseUrlLogin,baseUrlOther,service}
(2)Api->login.js
- 引入基础路径和axios实例对象
- 封装接口函数,并暴露出来
//1.引入基础路径和axios实例
import {baseUrlLogin,baseUrlOther,service} from '@/utils/request'
export function queryWikiList(pageNum,pageSize,data) {
return service({
url: `/web/wiki/queryWikiList?pageNum=${pageNum}&pageSize=${pageSize}`,
method: 'post',
data:data
})
}
//2.封装接口函数,并暴露出来
export function getWikiDetail(id) {
return service({
url: `/web/wiki/getWikiDetail?id=${id}`,
method: 'get'
})
}
(2)Vue组件中调用api函数
//1.引入接口函数
import { getWikiDetail } from '@/api/home'
//2.在方法中调用接口函数,获得接口数据
getWikiDetail().then(res =>{
console.log(res) // 就是请求回来的结果
}).catch(err=>{
console.log(err)
})