美文网首页Vue
配置项目中的axios拦截器

配置项目中的axios拦截器

作者: Issho | 来源:发表于2019-09-30 09:24 被阅读0次

☼ 注:笔者的文章是根据自己当前项目做的笔记,具体应用请参照自己实际项目情况

import axios from 'axios'
import qs from 'qs'
import rootStore from '@/store'
import { message } from 'antd'
import { HOST } from '../config'
import React from 'react'
import ReactDOM from 'react-dom'
import Cache from '@/utils/Cache'
import CheckLoginStatus from '@/components/check-login'
import { HashRouter as Router } from 'react-router-dom'

let loading, warn

// 暂时的简单配置,等联调接口时,做一些细节处理
const Axios = axios.create({
    baseURL: HOST, // 前缀:window.location.origin
    responseType: 'json', // 数据格式
    withCredentials: true, // 是否允许带cookie
    headers: {
        'Content-Type': 'application/json;charset=UTF-8' // json格式数据
    }
})

// http请求拦截器<pending>
Axios.interceptors.request.use(
    config => {
        if (!loading) {
            loading = message.loading('', 0)
        }
        if (config.method === 'post') {
            if (config.data && config.data.headers) { // 针对post的处理
                config.headers = config.data.headers
            }
            if (config.data.responseType) {
                config.responseType = config.data.responseType
            }

            config.data = config.headers['Content-Type'] === 'application/x-www-form-urlencoded' ?qs.stringify(config.data.param) : config.data.param
        } else { // get
            config.params = config.param
        }
        // 取消请求
        config.cancelToken = rootStore.Root.source.token

        return config
    },
    error => { // 响应错误处理
        if (!warn) {
            warn = message.warning('调用失败,稍后请重试', 1)
            warn = null
        }
        setTimeout(loading, 0)
        return Promise.reject(error)
    }
)

// http响应拦截器<done>
Axios.interceptors.response.use(
    response => {
        // 针对请求成功的处理
        if (response && response.data && +response.data.code === 0) {
            setTimeout(loading, 0)
            return response.data
        }

        // 针对后台返回blob的处理
        if (response && (response.config.responseType === 'blob')) {
            setTimeout(loading, 0)
            // 针对后台返回的JSON格式的错误信息
            if (response.data && response.data.type === 'application/json') {
                let reader = new FileReader()
                reader.onload = e => message.info(JSON.parse(e.target.result).msg)
                reader.readAsText(response.data)
                return
            }
            // 需要针对IE做兼容,所以直接返回blob对象,再针对不同浏览器做url转化处理
            // return window.URL.createObjectURL(new Blob([response.data], { type: response.data.type }))
            return new Blob([response.data], { type: response.data.type })
        }

        // 针对后台返回用户未登录的状态(路由重定向到登录页)
        if (response && response.data && +response.data.code === 100010110) {
            // 清空本地缓存
            Cache.clear()
            const div = document.createElement('div')
            ReactDOM.render(<Router><CheckLoginStatus/></Router>, div)
            ReactDOM.unmountComponentAtNode(div)
            return
        }

        // 针对code非0的处理
        response.data && message.info(response.data.msg)
        setTimeout(loading, 0)
        // return response
    },
    error => { // 响应错误处理
        if (!error.response) {
            setTimeout(loading, 0)
            return Promise.reject(error)
        }
        if (!warn) {
            warn = message.warning('调用失败,稍后请重试', 1)
            warn = null
        }
        setTimeout(loading, 0)
        return Promise.reject(error)
    }
)

export default Axios

相关文章

  • Vue方向:axios全局拦截器以及配置的优先级

    1、axios全局拦截器 axios在每一个请求配置中都有一个配置项用于拦截请求或响应结果 这个拦截只能拦截当前配...

  • axios拦截器接口配置与使用

    一:什么是axios拦截器、为什么要使用axios拦截器? 在vue项目中,我们通常使用axios与后台进行数据交...

  • vue-resource/axios发起请求

    vue-resource 发出 axios发出 vue-resource全局配置 axios 拦截器

  • React 使用 Axios

    Axios 如何发送, 端口不一致, 使用 proxy 配置转发 axios 拦截器, 同意 loading 处理...

  • 配置项目中的axios拦截器

    ☼ 注:笔者的文章是根据自己当前项目做的笔记,具体应用请参照自己实际项目情况

  • axios封装

    第一步:配置axios 首先,创建一个axios.js,这里面存放的时axios的配置以及拦截器等,最后导出一个a...

  • 玩转Vue_使用axios

    进入项目安装axios(npm install axios -S) axios配置 项目中安装axios模块完成后...

  • axios的封装

    Axios的拦截器介绍 axios的拦截器原理如下:image.pngaxios拦截器axios作为网络请求的第三...

  • axios 拦截器

    1、在 vue3 的项目中全局配置 axios 2、在 vue2 的项目中全局配置 axios 需要在 main....

  • 使用axios添加请求头的几种方式

    1.传入配置参数 单次请求 多次请求 2.创建axios实例 3.使用axios拦截器 使用拦截器的另一个好处是可...

网友评论

    本文标题:配置项目中的axios拦截器

    本文链接:https://www.haomeiwen.com/subject/lyweyctx.html