vue axios二次封装的详细解析

2024-09-28 16:40:47

axios的二次封装

  npm i axios    //下载axios

首先创建两个文件夹在src目录下；api和config

先在config文件夹下建立一个index.js；具体代码如下：

export default{
baseUrl:{
dev: "http://localhost:8082/mhy",	//开发环境
pro: "http://xxx.xx.xx.xx:8082/mhy",	//上线环境
}
}

当然我这里是因为我主要写后端springboot，就没有使用什么第三方前端的请求工具

在api文件夹下建立一个axios.js；对axios进行二次封装;

import axios from "axios"
import config from "@/config"

// const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro
const baseUrl = config.baseUrl.pro
class HttpRequest{
    //构造器
    constructor(baseUrl){
        this.baseUrl = baseUrl
    }
    //请求路径设置
    getInsideConfig(){
        const config = {
            baseURL:this.baseUrl,
            Header:{}
        }
        return config
    }

    //添加拦截器
    interceptors(instance){
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            const token = localStorage.getItem("Accept-Token");
            if(token !== null && token !== ""){
                config.headers["Accept-Token"] = token;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            // console.log('添加请求拦截器 请求错误')
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            // console.log('添加请求拦截器 响应')
            return response;
        }, function (error) {
            // 对响应错误做点什么
            // console.log('添加请求拦截器 响应错误')
            return Promise.reject(error);
        });
    }
    // 二次封装的请求
    request(options) {
        const instance = axios.create()
        options = {...this.getInsideConfig(),...options}
        this.interceptors(instance)
        return instance(options)
    }

}
export default new HttpRequest(baseUrl)

最后在api文件夹下创建你需要调用的api，当然你可以写在一个里面，也可以不同模块分开写

我这里是分开写的:

然后看看具体怎么使用

fileApi.js

import axios from "./axios";

// 上传文件图片
export const uploadImgAPI = (param) => {
    return axios.request({
        url: `/uploadImg/${param.id}`,
        method: "post",
        data: param.formData
    })
}
// 删除一个文件
export const deleteImgAPI = (param) => {
    return axios.request({
        url: `/deleteImg`,
        method: "post",
        data: param
    })
}

简单的写一个；在组件中引入就可以使用了

import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'

当然最后你也可以全局注册一下，然后直接通过proxy调用，也很方便，

到此这篇关于vue axios二次封装的详细解析的文章就介绍到这了,更多相关vue axios二次封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中axios的二次封装实例讲解

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '
vue axios基于常见业务场景的二次封装的实现

axios axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库. 我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务. npm: $ npm install axios bower: $ bower install axios Using cdn: <script src="https:/
vue axios 二次封装的示例代码

这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下 //引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => { //发起请求时,取消掉当前正在进行的相同请求 if
详解vue axios二次封装

这段时间告诉项目需要,用到了vue. 刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了顺便封装了一下定义公共参数与引入组件: import axios from 'axios' import qs from 'qs' axios.interceptors.request.use(config => { //显示loading return config }, error => { return Promise.reject(error) }) axios
vue-cil之axios的二次封装与proxy反向代理使用说明

目录 Axios与proxy反向代理 1.Axios 的特性 2.Axios 的安装 3.Axios 与proxy反向代理的使用 axios反向代理proxy个人理解使用反向代理proxy的原因 proxy基本配置 Axios与proxy反向代理 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 1.Axios 的特性从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 PromiseAPI 拦截请求和
Vue二次封装axios为插件使用详解

照例先贴上 axios的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重
Vue浅析axios二次封装与节流及防抖的实现

目录什么是axios axios请求图例 axios的二次封装为什么要进行二次封装防抖与节流什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu
vue axios二次封装的详细解析

axios的二次封装视频讲解 npm i axios //下载axios 首先创建两个文件夹在src目录下:api和config 先在config文件夹下建立一个index.js:具体代码如下: export default{ baseUrl:{ dev: "http://localhost:8082/mhy", //开发环境 pro: "http://xxx.xx.xx.xx:8082/mhy", //上线环境 } } 当然我这里是因为我主要写后端springb
项目中Axios二次封装实例Demo

1.为什么做封装? 方便代码整体调用.对请求做公共处理.个性化定制 2.别人已经封装了很多,为什么不直接修改使用? 封装思路不适合自身项目封装后调用不方便 3.个人封装demo 代码结构[基于vue] 基本思路将所有的请求接口地址按照文件分模块存储,比如 request/module/user 用户信息相关模块[服务] 2.封装方法.类.给所有请求绑定常用的请求方法,和对请求url上的路径参数做处理 generateServer.js import server from "../util/
Vue组件二次封装的一些实用技巧总结

目录前言透传 Attribute 透传 slot 普通slot 动态插槽名作用域插槽封装组件存在的问题组件实例属性和方法的调用总结前言在开发Vue项目我们一般使用第三方UI组件库进行开发,如element-plus, @arco-design/web-Vue, naive-ui等, 但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求. 对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口,除了我们需要封装的功能外,我们
vue axios接口请求封装方式

目录 vue axios接口请求封装总结 vue axios接口请求封装简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index
vue elementui二次封装el-table带插槽问题

目录 elementui二次封装el-table带插槽 element-ui table组件的二次封装(插槽的形式) 1.外层table组件封装 2.内层table组件代码 elementui二次封装el-table带插槽子组件table封装 html部分 <template> <div v-loading="loading"> <el-table ref="tableData" :stri
vue日常开发基础Axios网络库封装

目录引言 axios使用配置请求基本信息设置请求拦截器设置请求响应器项目中使用结尾引言首先Axios,一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 网络请求库无疑是项目开发中最基础的建设了,在这个前后端分离的时代,市面上有不少优秀的请求库,其中Axios就是优秀代表之一. 拦截请求和响应转换请求数据和响应数据自动转换 JSON 数据客户端支持防御 XSRF 支持 PromiseAPI 以上是axios的优秀点 axios使用本文是基于
Python如何实现Paramiko的二次封装

Paramiko是一个用于执行SSH命令的Python第三方库,使用该库可实现自动化运维的所有任务,如下是一些常用代码的封装方式,多数代码为半成品,只是敲代码时的备份副本防止丢失,仅供参考. 目前本人巡检百台设备完全无压力,如果要巡检过千台则需要多线程的支持,过万台则需要加入智能判断等. 实现命令执行: 直接使用过程化封装,执行CMD命令. import paramiko ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(par

vue axios二次封装的详细解析

相关推荐

随机推荐