在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。
import axios from 'axios';//引入axios //设置环境的切换 if(process.env.NODE_ENV=='development'){ axios.defaults.baseURL = 'http://120.53.31.103:84/' }else if(process.env.NODE_ENV=='production'){ axios.defaults.baseURL = 'https://wap.365msmk.com/' } //设置超时时间 axios.defaults.timeout = 10000; // 请求拦截 axios.interceptors.request.use( config =>{ config.headers={DeviceType:'H5'} return config } ) //响应拦截 axios.interceptors.response.use( response => { if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服务器状态码不是200的情况 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 case 401: router.replace({ path: '/login', }); break; // 403 token过期 // 登录过期对用户进行提示 // 跳转登录页面 case 403: Toast({ message: '登录过期,请重新登录', duration: 1000, forbidClick: true }); // 清除token localStorage.removeItem('token'); // 跳转登录页面 setTimeout(() => { router.replace({ path: '/login', }); }, 3000); break; // 404请求不存在 case 404: Toast({ message: '网络请求不存在', duration: 1000, forbidClick: true }); break; } return Promise.reject(error.response); } } ); //封装get请求 export function get(url,params){ return new Promise((resolve,reject)=>{ axios.get(url,{ params }).then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) }) } //封装post请求 export function post(url,params){ return new Promise((resolve,reject)=>{ axios.post(url,params).then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) }) }