vue之axios运用
import Vue from 'vue' import axios from 'axios' import router from '@/router' import qs from 'qs' import merge from 'lodash/merge' import { clearLoginInfo } from '@/utils' const http = axios.create({ timeout: 1000 * 90, withCredentials: true, headers: { 'Content-Type': 'application/json; charset=utf-8' } }) /** * 请求拦截 */ http.interceptors.request.use( config => { config.headers['token'] = Vue.cookie.get('token') // 请求头带上token return config }, error => { return Promise.reject(error) } ) /** * 响应拦截 */ http.interceptors.response.use( response => { if (response.data && response.data.code === 401) { // 401, token失效 clearLoginInfo() router.push({ name: 'login' }) } return response }, error => { return Promise.reject(error) } ) /** * 请求地址处理 * @param {*} actionName action方法名称 */ http.adornUrl = actionName => { // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截! return ( (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName ) } /** * get请求参数处理 * @param {*} params 参数对象 * @param {*} openDefultParams 是否开启默认参数? */ http.adornParams = (params = {}, openDefultParams = true) => { var defaults = { t: new Date().getTime() } return openDefultParams ? merge(defaults, params) : params } /** * post请求数据处理 * @param {*} data 数据对象 * @param {*} openDefultdata 是否开启默认数据? * @param {*} contentType 数据格式 * json: 'application/json; charset=utf-8' * form: 'application/x-www-form-urlencoded; charset=utf-8' */ http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => { var defaults = { t: new Date().getTime() } data = openDefultdata ? merge(defaults, data) : data return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data) } /** * windPost请求 * @param {String} url [请求地址] * @param {Object} params [请求携带参数] */ http.windPost = function (url, params) { return new Promise((resolve, reject) => { http .post(http.adornUrl(url), qs.stringify(params)) .then(res => { resolve(res.data) }) .catch(error => { reject(error) }) }) } /** * windJsonPost请求 * @param {String} url [请求地址] * @param {Object} params [请求携带参数] */ http.windJsonPost = function (url, params) { return new Promise((resolve, reject) => { http .post(http.adornUrl(url), http.adornParams(params)) .then(res => { resolve(res.data) }) .catch(error => { reject(error) }) }) } /** * windGet请求 * @param {String} url [请求地址] * @param {Object} params [请求携带参数] */ http.windGet = function (url, params, fun = null) { let config = {} if (fun !== null) { config = { params: params, responseType: 'blob', onDownloadProgress (progress) { fun(progress) } } } else { config = { params: params } } return new Promise((resolve, reject) => { http .get(http.adornUrl(url), config) .then(res => { resolve(res.data) }) .catch(error => { reject(error) }) }) } http.windGets = function (url, params) { return new Promise((resolve, reject) => { http .get(http.adornUrl(url), { params: params }) .then(res => { resolve(res.data) }) .catch(error => { reject(error) }) }) } /** * windXXPost请求 * @param {String} url [请求地址] * @param {Object} params [请求携带参数] */ http.windXXPost = function (url, params) { return new Promise((resolve, reject) => { http({ url: http.adornUrl(url), method: 'post', params: http.adornParams(params) }) .then(res => { resolve(res.data) }) .catch(error => { reject(error) }) }) } /** * postDownload * @param {String} url [请求地址] * @param {Object} params [请求携带参数] */ // http.postDownload = function (url, params) { // http.defaults.timeout = // return new Promise((resolve, reject) => { // http // .post(http.adornUrl(url), qs.stringify(params)) // .then(res => { // resolve(res.data) // }) // .catch(error => { // reject(error) // }) // }) // } export default http