Vue 的 axios二次封装

(以下的接口地址链接换成自己的写!!!)

首先在项目中src的目录下创建一个api的文件夹,在api的文件下在穿件两个文件用于二次封装

别忘了先安装axios:(在根目录下安装axios,如果安装过了,就不用看蓝色字体安装过程)

npm install --save axios

然后在main.js中引用axios:

// 引入axios
import {apiGet,apiPost} from './api/api'
Vue.prototype.$apiGet  = apiGet
Vue.prototype.$apiPost = apiPost

api下的第一个api.js:

import axios from 'axios';axios.defaults.timeout = 30000;
// 这个是环境测试配置,不知道可以搜索我的csdn中的Vue测试打包test
axios.defaults.baseURL = process.env.VUE_APP_API_URL// 添加响应拦截器
axios.interceptors.response.use(function (response) {//可以写if判断,提前拦截错误信息return response;}, function (err) {return Promise.reject(err);
});export function apiGet(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params,headers:{"token":sessionStorage.getItem('token')}}).then(res => {resolve(res.data);}).catch(err =>{reject(err.data) }) });
}export function apiPost(url, params){return new Promise((resolve, reject) => {axios({method: 'post',url:url,data:params}).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});}

api下的第二个https.js:

//这个是二次封装(用到apiPost的时候把下面接口那也改成这个,用不到就把apiPost去掉)
import {apiGet,apiPost} from "./api";export function jindutiao(){return new Promise((resolve)=>{apiGet("/index.php/index/admin/getNum").then(res=>{resolve(res)
})});// .catch(err=>{//     reject(err)// })}

然后按照(“jindutiao().这个是https.js中二次封装中你取的函数名字”)

先引用:import {jindutiao} from "../api/https"

在使用:jindutiao().then(res=>{

                console.log(res);

                })

二次封装在页面上的使用以上说的以下示例代码,在script中:

// 这个是二次封装后https.js中封装后直接写函数在这个页面使用
import {jindutiao} from "../api/https"
export default {data() {return {};},mounted() {//    这个是进度条接口jindutiao().then(res=>{// console.log(res);this.percentage = res.data.cssnum;this.percentage1 = res.data.htmlnum;this.percentage2 = res.data.jsnum;this.percentage3 = res.data.vuenum;}),},methods: {}}</script>

如果有跨域问题可以在最后在vue.config.js中添加以下代码解决用注释下面的:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({publicPath:'./',transpileDependencies: true,lintOnSave:false,// 跨域问题devServer: {proxy:{'/api1':{target:'http://47.94.4.201/',pathRewrite:{'^/api1':''},ws:true,changeOrigin:true,}}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/30900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux内核开发-替换内核

0.前言 上一章&#xff08;点击返回上一章&#xff09;提到如何编译内核源码&#xff0c;本章主要介绍如何将编好的内核替换已有的内核。 1. 替换内核 第1步&#xff1a;查看当前内核版本 cat /proc/version第2步&#xff1a; 查看机器上的内核信息 grep menuentry /boot/…

Word使用小技巧

1、万能F4键 在Word中F4 键的功能是重复上一步操作&#xff0c;也就说上一步你做了什么操作&#xff0c;只要按F4键&#xff0c;它就会自动帮你重来一次。比如&#xff0c;合并单元格&#xff0c;你再也不用反复去点合并按钮&#xff0c;只要合并第一个单元格后&#xff0c;剩…

Mware Fusion Pro 13 mac版:一键掌控虚拟世界

VMware Fusion Pro 13是一款功能卓越的虚拟化软件&#xff0c;专为Mac操作系统量身打造。这款软件为用户提供了一个一站式的虚拟化解决方案&#xff0c;能够满足各种多样化的需求。 VMware Fusion Pro 13 Mac获取 VMware Fusion Pro 13的强大之处在于其采用了最 先进的虚拟化…

嵌入式使用加密算法要考虑的问题

在嵌入式系统中&#xff0c;选择加密算法时需考虑哪些因素&#xff1f; 选择嵌入式系统中的加密算法时&#xff0c;需综合考虑以下几个关键因素&#xff1a; 性能与资源限制&#xff1a;嵌入式设备通常具有有限的计算能力和存储空间。因此&#xff0c;算法的执行速度、内存占用…

食品安全无小事:EasyCVR+AI技术助力食品加工厂管理透明化,构建食品安全防线

一、背景需求 近期有新闻记者曝光某省禽类屠宰加工厂脏乱差问题严重&#xff0c;工人脚踩鹅肠鸭肠混杂洗地水、烟头随手扔进鸭肠筐、污水捞出死鸭再上生产线…卫生情况十分堪忧。食品卫生安全频频出现负面新闻&#xff0c;如何实现源头治理&#xff1f;如何将各类食品安全风险隐…

C++ Primer Plus第五版+习题重点笔记(p250-300)

第七章 类&#xff08;下&#xff09; clear需要访问Screen的私有成员;而要想令这种访问合法&#xff0c;Screen需要把 window mgr 指定成它的友元 如果一个类指定了友元类&#xff0c;则友元类的成员函数可以访问此类包括非公有成员在内的所有成员 每个类负责控制自己的友元…

电子书(chm)-加载JS--CS上线

免责声明: 本文仅做技术交流与学习... 目录 cs--web投递 html(js)代码 html生成chm工具--EasyCHM 1-选择powershell 模式 生成 2-选择bitsadmin模式生成 chm反编译成html cs--web投递 cs配置监听器--->攻击---->web投递---> 端口选择没占用的, URL路径到时候会在…

《昇思25天学习打卡营第1天 | 认识MindScope AI框架和昇思大模型平台》

活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 昇思MindSpore学习笔记&#xff1a;探索AI的无限可能 嗨&#xff0c;AI爱好者们&#xff01;今天&#xff0c;我要带你们深入了解一个强大的全场景深度学习框架——昇思MindSpore。 准备好了吗…

AWR1843BOOST上的TM4C1294NCPDT是干啥用的?

摘要&#xff1a;AWR1843BOOST上面有2个体积较大的芯片&#xff0c;一片是雷达&#xff0c;另一片是什么呢&#xff1f; 答案&#xff1a;它就是XDS110仿真器。 有了它&#xff0c;就不用再买一个仿真器了。 从AWR1843BOOST的原理图中可以看到整个 BOOST板子上只有2个比较大的…

C++switch陈述

C 使用关键字 switch、case、default对一个常数执行不同的分流&#xff0c;这构成多重选择的结构&#xff0c;形式如下 简单来说&#xff0c;switch后头接一小括弧&#xff0c;小括弧内为一常数运算式&#xff0c;计算出常数值若与其后case的位标(label) 相符&#xff0c;就会执…

[深度优先搜索DFS]迷宫问题

描述 定义一个二维数组&#xff1a; int maze[5][5] {0, 1, 0, 0, 0,0, 1, 0, 1, 0,0, 0, 0, 0, 0,0, 1, 1, 1, 0,0, 0, 0, 1, 0,}; 它表示一个迷宫&#xff0c;其中的1表示墙壁&#xff0c;0表示可以走的路&#xff0c;只能横着走或竖着走&#xff0c;不能斜着走&#xff0…

Prometheus入门

Prometheus入门 Setup Reference:https://prometheus.io/docs/introduction/overview/ exporters:你可以部署在你想要获取metrics的应用旁&#xff0c;接收Prometheus请求&#xff0c;从应用程序中收集数据并转换为正确的格式&#xff0c;最后返回给Prometheus;Service Dis…

创建百度百科词条要多少钱?看这篇

“百度百科词条人人可编辑&#xff0c;词条创建和修改均为免费&#xff0c;不存在官方及代理商付费代编。” 是的&#xff0c;百度百科免费开放&#xff0c;任何人都可以自己做&#xff0c;但是作为一个给上百家企业和个人创建百度百科词条的专业人士来说&#xff0c;给大家一…

面试题——RabbitMQ

★1.如何保证消息的幂等性&#xff1f;&#xff08;如何避免消息重复投递&#xff09; 生产端: 在消息发送前&#xff0c;先查询数据库此消息是否被处理过。处理过则忽略、否则继续处理&#xff0c;并在处理完成后修改状态为已处理。 消费端: 每个消息都生成全局唯一ID或业务I…

模型预测控制MPC详解(附带案例实现)

模型预测控制MPC详解&#xff08;附带案例实现&#xff09; 文章目录 模型预测控制MPC详解&#xff08;附带案例实现&#xff09;1. 最优控制问题2. 什么是MPC3. 二次规划Quadratic Programming4. MPC为什么可以转换成QP问题&#xff08;推导过程&#xff09;5. MPC总结5.1 MPC…

QT中QSettings的使用系列之四:QSettings与操作QJson(registerFormat())

1、核心代码 #include "widget.h" #include "ui_widget.h" #include <QSettings> #include <QJsonObject> #include <

基于51单片机的篮球计分器设计

一.硬件方案 本设计用由AT89C51编程控制LED七段数码管作显示的球赛计时计分系统。该系统具有赛程定时设置、赛程时间暂停、及时刷新甲乙双方的成绩等功能。 电路主要由STC89C52单片机最小系统数码管显示模块数码管驱动模块蜂鸣器模块按键模块&#xff1b; 二.设计功能 &…

哔哩哔哩视频URL解析原理

哔哩哔哩视频URL解析原理 视频网址解析视频的原理通常涉及以下几个步骤&#xff1a; 1、获取视频页面源代码&#xff1a;通过HTTP请求获取视频所在网页的HTML源代码。这一步通常需要处理反爬虫机制&#xff0c;如验证码或用户登录。 2、解析页面源代码&#xff1a;分析HTML源代…

064、Python 可变参数和关键字参数

在编写函数时&#xff0c;我们可能会存在不确定传入参数数量的情况。那么我们可以使用可变数量的参数。函数中可变数量的参数包括可变参数和关键字参数。 1、可变参数&#xff08;*args&#xff09;&#xff1a; 可变参数允许函数接受任意数量的位置参数。在函数定义中&#…

Transformer学习理解

1.前言 本文介绍当下人工智能领域的基石与核心结构模型——Transformer&#xff0c;为什么说它是基石&#xff0c;因为以ChatGPT为代表的聊 天机器人以及各种有望通向AGI&#xff08;通用人工智能&#xff09;的道路上均在采用的Transformer。 Transformer也是当下NLP任…