axios封装总结

基础的axios封装配置。欢迎大家扩展

/libs/request.js

import HttpRequest from '@/libs/axios'
const axios = new HttpRequest(process.env.VUE_APP_URL)
export default axios

/libs/axios.js

import axios from 'axios'

class HttpRequest {
    constructor(baseUrl) {
        this.baseUrl = baseUrl
    }
    getInsideConfig() {
        const config = {
            baseURL: this.baseUrl,
            // 设置header
            headers: {}
        }
        return config
    }
    interceptors(instance, url) {
        // 请求拦截
        instance.interceptors.request.use(config => {
            return config
        }, error => {
            return Promise.reject(error)
        })

        // 响应拦截
        instance.interceptors.response.use(res => {
            const {
                data,
                status
            } = res
            return {
                data,
                status
            }
        }, error => {
            this.destroy(url)
            let errorInfo = error.response
            if (!errorInfo) {
                const {
                    request: {
                        statusText,
                        status
                    },
                    config
                } = JSON.parse(JSON.stringify(error))
                errorInfo = {
                    statusText,
                    status,
                    request: {
                        responseURL: config.url
                    }
                }
            }
            return Promise.reject(error)
        })
    }

    request(options) {
        const instance = axios.create()
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance, options.url)
        return instance(options)
    }
}
export default HttpRequest

/api/data.js

import axios from '@/libs/request'

export const saveData = (data) => {
    return axios.request({
        url: '/api/save',
        method: 'post',
        data: data,
    })
}