在Vue中是如何封装axios

1、安装

npm install axios; // 安装axios

1、引入

import axios from 'axios'

3、接口根地址

const baseurl = api_base_url // 由webpack的插件defineplugin注入

webpackconfig
    .plugin('define')
        .use(require('webpack/lib/defineplugin'), [{
            // node_env 环境变量，开发环境为: 'development', 为了保证测试环境打的包与生产环境一致，测试环境和生产环境都为'production'
            'process.env.node_env': json.stringify(process.env.node_env),
            // 当前应用的环境（开发环境为: 'dev'，测试环境为: 'test', 生产环境为: 'prod'）
            'process.env.app_env': json.stringify(process.env.app_env),
            // 后台接口请求地址
            'api_base_url': json.stringify(config.meshprop('apibaseurl')),
            // 首页路径
            'app_index_path': json.stringify(indexpath),
            // 路由模式
            'app_router_mode': json.stringify(config.meshprop('routermode')),
            // 是否使用element组件库
            'app_use_element': json.stringify(config.meshprop('useelement')),

}])

config.js：配置一些系统名称，api根路径等

const path = require('path')
const os = require('os')
const packagename = 'focm' // 项目包名称
const localip = getlocalip() // 本地ip地址

module.exports = {
    // 默认配置
    default: {
        // 系统名称，用于设置页面 head 中 title
        appname: 'xxxxx',
        // 是否为多页应用
        ismulti: false,
        // 是否支持移动端
        ismobile: false,
        // 是否使用element组件库（https://element.eleme.cn/#/zh-cn/）
        useelement: true,
        // 路由模式（值为hash 或 history, 参考：https://router.vuejs.org/）
        routermode: 'hash',
        // 接口请求根路径
        apibaseurl: '',
        ....
    },
    // 开发环境的配置
    dev: {
        apibaseurl: '/api',
        host: localip,
        port: 8080,
        autoopenbrowser: true, // 是否自动打开浏览器
        writetodisk: false, // 是否将生成的文件写入磁盘
        proxytable: {
            '/api': {
                target: 'http://focm-web.focms.paas.test',
                changeorigin: true
                }
            }
    },
    // 测试环境的配置
    test: {
        // 接口请求根路径
        apibaseurl: '/focm',
        outputroot: path.resolve(__dirname, 'dist/test'),
        publish: {
            remotehost: 'x.x.x.x',
            remoteport: '22',
            remoteusername: 'qinglianshizhe',
            remotepassword: 'xxxxxx',
            remoteapproot: `/xxx/xxx/${packagename}`,
            weburl: 'http://xxxxx.com/'
        }
    },
    // 生产环境的配置
    prod: {
        ...
    }
}

// 获取本地ip
function getlocalip () {
    let interfaces = os.networkinterfaces()
    for(let devname in interfaces){
        let iface = interfaces[devname]
        for(let i=0;i<iface.length;i++){
            let alias = iface[i];
            if(alias.family === 'ipv4' && alias.address !== '127.0.0.1' && !alias.internal){
                return alias.address;
            }
        }
    }
    return 'localhost'
}

我们继续来封装axios

/**
 * 业务异常类
 */

class businesserror extends error {
    constructor (code, message, data) {
        super(message)
        this.code = code
        this.name = 'businesserror'
        this.data = data
    }
}
/**
 * 系统异常类
 */
class systemerror extends error {
    constructor (code, message, data) {
        super(message)
        this.code = code
        this.name = 'systemerror'
        this.data = data
    }
}
// axios 配置
axios.defaults.timeout = 10000
axios.defaults.headers.post['content-type'] = 'application/json;charset=utf-8'

// 执行 post 请求
function post (option, vm) {
    option.method = 'post'
    return http(option, vm)
}

// 执行 get 请求
function get (option, vm) {
    option.method = 'get'
    return http(option, vm)
}

// 下载请求
function download (option, vm) {
    option.method = option.method || 'get'
    option.isdownload = true
    option.responsetype = 'blob'
    return http(option, vm)
    }

/**
* 请求后台接口
* @param option 参数
* url: 请求路径（会拼接到baseurl后面，“/” 开头）
* data: 请求参数对象
* timeout: 请求超时时间（默认为：10000，即10秒）
* toasterror: 自动提示业务异常信息，默认为true，为false时不自动提示
* @param vm vue对象（用于异常时自动toast提示异常信息）
* @return {promise} promise对象
*/

function http (option, vm) {
    return new promise((resolve, reject) => {
        let method = option.method || 'post'
        let url = baseurl + option.url
        let timeout = option.timeout || 10000
        let headers = option.headers || {}
        let responsetype = option.responsetype
        let data = {} // 可以在此设置默认值
        if (option.data) {
            if (option.data instanceof formdata) {
                headers['content-type'] = 'multipart/form-data'
                let formdata = option.data
                object.keys(data).foreach((key) => {
                    formdata.append(key, data[key])
                })
                data = formdata
            } else {
                data = { ...data, ...option.data }
            }
        }

        let requestoptions = { method, url, headers, timeout, responsetype }
        if (method.touppercase() === 'get') {
            requestoptions.params = data
        } else {
            requestoptions.data = data
        }
        axios(requestoptions).then( (res) => {
            const contentdisposition = res.headers['content-disposition']
            // 文件下载
            if (contentdisposition &&
        (/filename\*=utf-8''(.*)/.test(contentdisposition) || /filename="(.*)"/.test(contentdisposition))) { // 如果是文件下载
                const utf8match = contentdisposition.match(/filename\*=utf-8''(.*)/) // 匹配utf-8的文件名
                const normalmatch = contentdisposition.match(/filename="(.*)"/) // 匹配普通英文文件名
                const filename = utf8match ? decodeuricomponent(utf8match[1]) : normalmatch[1]
                const blob = new blob([res.data])
                const downloadelement = document.createelement('a')
                const href = window.url.createobjecturl(blob)
                downloadelement.href = href
                downloadelement.download = filename
                document.body.appendchild(downloadelement)
                downloadelement.click()
                document.body.removechild(downloadelement)
                window.url.revokeobjecturl(href)
                resolve(res)
            } else { // json信息
                getresponseinfo(res).then((resinfo) => {
                    responseinfohandle(resinfo, resolve, reject, option, vm, requestoptions)
                })
            }
        }, err => {
            errorhandle(err, reject, option, vm)
        }).catch(function (err) {
            errorhandle(err, reject, option, vm)
        })
    })

}

// 处理响应信息
function responseinfohandle (resinfo, resolve, reject, option, vm) {
    // 请求是否成功
    let issuccess = resinfo.retcode === '200'
    // 状态码
    let code = resinfo.retcode
    // 描述信息
    let message = resinfo.retmsg || '请求失败！'
    // 数据
    let resdata = resinfo.data || {}
    if (issuccess) { // 请求成功
        console.log(`[${option.method || 'post'}]${option.url} 请求成功！\n请求参数:`, option.data, '\n响应结果:', resinfo)
        resolve(resdata)
    } else { // 业务异常
        console.error(`[${option.method} || 'post']${option.url} 请求失败！\n请求参数:`, option.data, '\n响应结果:', resinfo)
        let err = new businesserror(code, message, resdata)
        errorhandle(err, reject, option, vm)
    }
}

// 获取响应信息json对象

function getresponseinfo (res) {
    return new promise((resolve, reject) => {
        // 返回的信息
        let resinfo = res.data
        if (resinfo instanceof blob) {
            const reader = new filereader()
            reader.readastext(resinfo, 'utf-8')
            reader.onload = () => {
                resinfo = json.parse(reader.result)
                resolve(resinfo)
            }
        } else {
        resolve(resinfo)
        }
    })
}

/* 异常处理 */
function errorhandle (err, reject, option, vm) {
    let error = null
    if (err.name === 'businesserror') {
        error = err
    } else {
        console.error(option.url, '请求失败！', err.code, err)
        error = new systemerror(500, '非常抱歉，系统出现错误，请稍后重试！')
    }
    console.log('error = ', error)
    if (vm) {
        if (error.name === 'businesserror') { // 业务异常
            // 没有权限
            if (error.code === 'xxx') {
                error.ignore = true
                if (!isshowunauthorized) {
                    vm.$popupalert({
                        title: '提示',
                        message: '未登录或者会话已过期，请重新登录！',
                        width: 330,
                        height: 180,
                        btntext: '重新登录',
                        onok: () => {
                            isshowunauthorized = false // 是否显示重新登录弹框设为true
                            // 跳转到登录页面，登录成功后还跳转到原路径
                            vm.$router.push({ name: 'login', params: { frompath: vm.$route.fullpath } })
                            vm.$eventbus.$emit('no_auth_event')
                        }
                    })
                    isshowunauthorized = true // 是否显示重新登录弹框设为true
                }
                error.ignore = true
            } else if (option.toasterror !== false) {
                vm.$toast({ type: 'error', message: error.message })
            }
        } else { // 系统异常
            vm.$toast('网络异常！')
        }
    }
    reject(error)
}

export default {
    baseurl,
    http,
    post,
    get,
    download
}

apiplugin.js，封装成plugin插件

import vue from 'vue'
import api from '@/assets/js/api.js'

export default {
    install () {
        vue.prototype.$api = api
    }
}

main.js，注入插件

import apiplugin from './plugins/apiplugin.js'

// 后台接口插件
vue.use(apiplugin)

4、使用事例

4.1下载

this.$api.download({
    url: '/xxx/xxx/xxx',
    data: params
}, this)

4.2get

this.$api.get({
    url: `/xxx/xxx/xx`,
    data: params
}, this).then((res) => {
    console.log(res)
})

4.3post

this.$api.post({
    url: '/api/basiclist/query',
    data: params
}, this).then(res => {
})

到这里axios的封装基本就完成了

到此这篇关于在vue中是如何封装axios的文章就介绍到这了,更多相关在vue中封装axios内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/

目录