http.js
import axios from 'axios'; import Qs from "qs" import store from '@/store/store' import router from '@/router/index' // 设置请求超时时间 https://www.kancloud.cn/yunye/axios/234845 axios配置 axios.defaults.timeout = 1000; // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 axios.defaults.baseURL =''; // 在请求或响应被 then 或 catch 处理前拦截它们。 // http request 拦截器 在headers上添加token // 添加请求拦截器 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 if (store.state.token.token) { let token = store.state.token.token // 在 XRH 的Request Headers 中查看 // 判断是否存在token,如果存在的话,则每个http header都加上token // config.headers.Authorization = `token ${store.state.token}`; // 但是我要的是不是Authorization,而是自定义的 X-Auth-Token // config.headers['toekn'] = '840e8e68de044986ba1d5565063f205c' config.headers['X-Auth-Token'] = `token ${token}`; } return config; }, err => { // 对请求错误做些什么 return Promise.reject(err); }); // http response 拦截器 token 已过期,重定向到登录页面 // 添加响应拦截器 axios.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 if (error.response) { // console.log('后台返回的全部数据结构',error.response) // console.log('error.response',error.response.data == 'error@nologin') // 首页中出现access_token已经过期时不直接跳转到登录页 // return switch (error.response.status) { case 401: // 401 清除token信息并跳转到登录页面 store.commit('logout'); router.replace({ path: '/login', query: {redirect: router.currentRoute.fullPath} }) } // console.log('router',router) console.log('router.currentRoute',router.currentRoute) } // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402 return Promise.reject(error.response.data) // 返回接口返回的错误信息 }); /** * 封装get方法 */ export function get(url,param={}){ return new Promise((resolve,reject) => { axios.get(url,{params:param}).then(response => { resolve(response.data); }).catch(err => { reject(err) }) }) } /** * 封装post请求 */ // http://www.onlyued.com/archives/344 // vue-resource中使用了Vue.http.options.emulateJSON = true; 以application/x-www-form-urlencoded的请求头部发送参数 /* axios 使用 headers: { 'Content-Type': 'application/x-www-form-urlencoded',//请求头部 }, */ // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等, // 这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) export function post(url,data = {}){ return new Promise((resolve,reject) => { axios.post(url, data,{ headers:{ // 小程序中需要全部小写 // 'content-type': 'application/json' 'content-type': 'application/json;charset=UTF-8' // 'Content-Type': 'application/x-www-form-urlencoded' data数据处理 -- Qs.stringify(data) //以表单形式提交 } }).then(response => { resolve(response.data); },err => { reject(err) }) }) }
api.js
import {post,get} from './http' let SERVER_FLAG = 'problem-manage';//通用标识 //服务器环境标识 1:测试;2:生产。 let signSystem = 1; let host = 'http://' //测试环境 if(signSystem === 2){ host = 'http://';//生产环境 } if (process.env.NODE_ENV === 'development') { // dev 环境 host = '/api'; } // 请求接口 export function indexReport(data = {}){ return post(`${host}/${SERVER_FLAG}/indexReport`,data) }
config目录下的index.js里配置
proxyTable: { '/api': { target: 'http://10.98:8080', // 代理请求后台地址 changeOrigin: true, pathRewrite: { '^/api': '' } } }, build里的assetsPublicPath前面加一个点 assetsPublicPath: './',