vue+axios封装通用方法

引入axios

npm install axios

新建api-->axios.js 文件，封装全局实例

import axios from 'axios'
import router from '@/router'
import { ElLoading } from 'element-plus'

const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 20000,
    maxContentLength: 2000,
    headers: {}
})

let loading = []

service.interceptors.request.use(
    (config) => {
        if(!config.headers["Content-Type"]) {
            loading.push(
                ElLoading.service({
                    target: '#app',
                    lock: true,
                    text: '加载中......',
                    background: 'rgba(0,0,0,0.6)',
                    customClass: "custom-loading-svg"
                })
            )
        }
        config.headers["X-Authorization"] = 'Bearer ' + localStorage.getItem("token")
        return config
    }, (error) => {
        loading.forEach((e) => {
            e.close()
        })
        return Promise.reject(error)
    }
)

service.interceptors.response.use(
    (response) => {
        loading.forEach((e) => {
            e.close()
        })
        let res
        if(response.status === 200) {
            if(response.data.hasOwnProperty('status')) {
                if(response.data.status === 200) {
                    res = response.data.data
                } else {
                    res = {
                        code: 5,
                        error: response.data.errorCode,
                        message: response.data.message
                    }
                }
            } else {
                res = response.data
            }
        }
        return res
    }, (error) => {
        loading.forEach((e) => {
            e.close()
        })
        let res = error
        if(error.response.status === 401) {
            res = {
                errorCode: 401,
                message: "登录失败，请检查用户信息！",
                data: ""
            }
            router.push({path: '/login'})
        } else {
            res = {
                code: 5,
                error: error.response.data,
                message: '操作失败！'
            }
            return res
        }
    }
)

新建api-->http.js 文件，封装通用请求方法

import axios from './axios'

// get方法获取数据 
getData = (url, para, callback) => {
    let dataStr = '' // 数据拼接字符串
    Object.keys(para).forEach(key => {
        dataStr += key + '=' + para[key] + '&'
    })
    if(dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
    }
    axios.get(url)
        .then(function(response) {
            callback(repsonse)
        })
        .catch(function(error) {
            callback(err0r)
        })
}

// post方法
const postData = (url, para, callback) => {
    axios.podt(url, para)
        .then(function(response) {
            callback(response)
        })
        .catch(function(error) {
            callback(error)
        })
}

//post方法传输文件
const postFile = (url, para, callback) => {
    axios.post(url, para, {
        headers: {
            "Content-Type": "multipart/form-data"
        }
    }).then(function(response) {
        callback(repsonse)
    }).catch(function(error) {
        callback(error)
    })
}

// delete方法
const deleteData = (url, para,acallback) => {
    axios.delete(decodeURIComponent(url), para)
        .then(function(response) {
            callback(response)
        })
        .catch(function(error) {
            callback(error)
        })
}

export {
    getData,
    postData,
    postFile,
    deleteData
}