axios的封装

封装++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

import axios from 'axios'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'     //这是之前的js-cookie封装的获取token的方法
 

const service = axios.create({
    baseURL: "/api",
    timeout: 30 * 1000,
    withCredentials: true
})
 

let $_loading = null
 

service.interceptors.request.use(
    config => {
        /**
         *  config.loading === false 不需要loading加载效果
         */
 

        if (config.loading === undefined) {
            $_loading = Loading.service({
                fullscreen: true,
                lock: true,
                text: '正在加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.35)'
            })
        }
 

        const token = getToken()
 

        if (token) {
            // config.headers.Authorization = `Bearer ${token}`
            config.headers.Authorization = `${token}`
        } else {
            // config.headers.Authorization = `Bearer `
            config.headers.Authorization = ``
        }
 

        return config
    },
 

    err => Promise.reject(err)
)
 

service.interceptors.response.use(
    res => {
        $_loading.close()
        return res.data
    },
 

    err => {
        $_loading.close()
 

        const { status } = err.response ? err.response : { status: '' }
        if (err && err.response) {
            switch (status) {
                case 400:
                    err.message = '请求错误(400)'
                    break
                case 401:
                    err.message = '未授权，请重新登录(401)'
                    store.dispatch('user/logout')
                    break
                case 403:
                    err.message = '拒绝访问(403)'
                    store.dispatch('user/logout')
                    break
                case 404:
                    err.message = '请求出错(404)'
                    break
                case 405:
                    err.message = '请求未允许(405)'
                    break
                case 408:
                    err.message = '请求超时(408)'
                    break
                case 500:
                    err.message = '服务器错误(500)'
                    break
                case 501:
                    err.message = '服务未实现(501)'
                    break
                case 502:
                    err.message = '网络错误(502)'
                    break
                case 503:
                    err.message = '服务不可用(503)'
                    break
                case 504:
                    err.message = '网络超时(504)'
                    break
                case 505:
                    err.message = 'HTTP版本不受支持(505)'
                    break
                default:
                    err.message = `连接出错(${err.response.status})!`
            }
        } else {
            err.message = '连接服务器失败!'
        }
 

        Message({
            message: err.message,
            type: 'error',
            duration: 5 * 1000
        })
 

        return Promise.reject(err)
    }
)
 

export default service

 

使用————————————————————————————————

import fetch from '@/utils/fetch'
post：
export function queryHomePage(data) {
    return fetch({
        method: 'post',
        url: ' 地址',
        data
    })
}
 
get：
export function queryAll(data) {
    return fetch({
        method: 'get',
       url: ' 地址',
        params: {
            index: data.index,
            pageSize: data.pageSize
        },
    })
}
 
传文件  携带参数转form-data
export function updateNamedFiles(data) {
    return fetch({
        method: 'post',
        url: ' 地址',
        data,
        transformRequest: [function(data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },

    })
}