在Vue中是如何封装axios

目录
  • 1、安装
  • 1、引入
  • 3、接口根地址
  • 4、使用事例
    • 4.1下载
    • 4.2get
    • 4.3post

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue项目中如何封装axios(统一管理http请求)

    1.需求说明 在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用. 2.Vue项目结构 在本地创建Vue项目,目录结构如下: - public  静态资源文件  - src  |- assets  静态资源目录  |- components 公共组件目录  |- http   axios封装目录  |- router  路由管理目录  |- store  状态管理目录  |- views  视图组件目录  |- A

  • 如何用vue封装axios请求

    其实vue封装axios是很简单的 首先 在src路径下建http文件夹 并且创建api.js env.js request.js 这三个文件 env.js文件 这个文件主要就是封装我们的公共地址 export default { // 开发环境 dev: { baseUrl: "开发环境公共地址" }, // 测试环境test test: { baseUrl: "测试环境公共地址" }, //线上接口 prod: { baseUrl: "线上环境公共地址

  • vue中封装axios并实现api接口的统一管理

    在vue项目中,我们通常都是使用axios与后台进行数据交互,axios有很多好用的特性,这里不多做介绍,相关细节可以查阅axios中文网.在对axios进行封装之前,我们要使用vue脚手架工具创建一个vue项目(这里我用的是cli4). 安装 cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个serv

  • Vue3+TypeScript封装axios并进行请求调用的实现

    不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中使用TypeScript虽然短期内会增加一些开发成本,但是对于其需要长期维护的项目,TypeScript能够减少其维护成本,使用TypeScript增加了代码的可读性和可维护性,且拥有较为活跃的社区,当居为大前端的趋势所在,那就开始淦起来吧~ 使用TypeScript封装基础axios库 代码如下: // http.ts import axios, { AxiosRequestConfig, AxiosRes

  • vue封装axios的几种方法

    基础版 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象.我平常elementUI用的比较多,这里你也可以使用自己的UI库. import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径,这里也可以使用env来判断环境 let

  • vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • 在Vue中是如何封装axios

    目录 1.安装 1.引入 3.接口根地址 4.使用事例 4.1下载 4.2get 4.3post 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/DefinePlugi

  • 项目中使用Typescript封装axios

    目录 写在前面 基础封装 拦截器封装 类拦截器 实例拦截器 接口拦截 封装请求方法 取消请求 准备工作 取消请求方法的添加与删除 取消请求方法 测试 测试请求方法 测试取消请求 写在最后 写在前面 虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就一步一步的去封装,实现一个灵活.可复用的一个请求请发. 这篇文章封装的axios已经满足如下功能: 无处不在的代

  • vue中利用Promise封装jsonp并调取数据

    Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败)两个结果. 这两个结果不会改变.然后结果结束后就会用then来执行相应的结果. new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成

  • VUE中使用HTTP库Axios方法详解

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth

  • 浅谈vue中所有的封装方式总结

    目录 1.封装API 2.注册全局工具组件 3.封装全局函数 4. 为了减少页面代码量的封装 如何确定我需要封装呢? 1.复用,如果觉得以后还会用到 2.你觉得方便,别的地方可能也需要用 3.如果不封装,页面代码臃肿的时候 1.封装API 使用场景:业务中最常见最普通的封装 步骤一: 步骤二:  步骤三:  2.注册全局工具组件 使用场景:想让组件全局可用,尤其是第三方插件使用时 步骤一:   步骤二: 3.封装全局函数 使用场景:有些逻辑处理函数代码量很大,且具有独特功能(如日期处理函数,数组

  • vue中el-message的封装使用

    目录 前言 实现方法 方法一 方法二 方法三(有残缺的方法,可以带着问题看方法4) 方法四 方法五 最后 前言 最近对项目进行改造,发现在el-message使用中,如果遇到服务器挂了或者在重启等其他情况,页面message会弹出一大堆报错信息,看起来很不美观,所以对el-message进行重写改造,这里记录下改造中遇到的问题和实现,希望能对你有点帮助. 实现方法 实现方法有很多种,可以根据你实际项目情况决定使用哪一种. 方法一 直接css里面给这个样式,简单省事,但是这样子有一个问题所有的me

  • vue中使用svg封装全局消息提示组件

    本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下 先看效果图 一.首先安装下载需要用到的svg相关依赖 npm install svg-sprite-loader --save-dev 二.针对没有vue.config.js文件的vue项目,直接在webpack.base.conf.js中进行如下两个配置 1.找到图片相关配置位置,添加款选出的代码 2.在图片配置后添加如下代码 三.根据添加的代码我们去src下创建一个icons文件夹,icons下面

  • Vue3中使用typescript封装axios的实例详解

    这个axios封装,因为是用在vue3的demo里面的,为了方便,在vue3的配置里面按需加载element-plus 封装axios http.ts import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } from 'axios' import { IResponseData } from '@/types' import { ElMessage, ElLoading, ILoadingInstance

  • vue中的slot封装组件弹窗

    目录 slot封装组件弹窗 vue组件slot入门---弹窗组件 插槽的基础使用 弹窗组件 slot封装组件弹窗 <template>   <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" center>     <slot name="content"></slot>   </el

随机推荐