zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    为什么需要链路追踪
    Nacos Config 多环境的配置
    Nacos Config 客户端的使用
    Nacos Config 服务端初始化
    使用路由网关的全局过滤功能
    什么是 Spring Cloud Gateway
    c# 第五节 第一个控制台程序、第一个桌面、快捷键、注释
    c# 第四节 Net Framework编写应用程序的过程
    c# 第三节 vs的安装
    c# 第二节 c#的常用IDE环境
  • 原文地址:https://www.cnblogs.com/bertha-zm/p/11394416.html
Copyright © 2011-2022 走看看