vue之axios运用

时间:2019-08-22
本文章向大家介绍vue之axios运用,主要包括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

原文地址:https://www.cnblogs.com/bertha-zm/p/11394416.html