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/…

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

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

食品安全无小事: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;就会执…

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;给大家一…

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

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

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

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

哔哩哔哩视频URL解析原理

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

Transformer学习理解

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

【上海交大】博士生年度进展报告模板

上海交通大学 博士生年度进展报告模板 比较不好找&#xff0c;在交我办中发起申请流程后才能看到链接&#xff0c;链接如下&#xff1a; https://www.gs.sjtu.edu.cn/xzzx/pygl/15

爬取CSDN博文到本地(包含图片,标签等信息)

文章目录 csdnToMD改进将CSDN文章转化为Markdown文档那有什么办法快速得到md文档&#xff1f;例如&#xff1a;获取单个文章markdown获取所有的文章markdown 项目中待解决的问题 csdnToMD 项目原作者&#xff1a;https://gitee.com/liushili888/csdn-is—mark-down 改进后仓库…

Z语言学习——基于通讯案例

目录 1数据类型 2初始状态 3 Alice的消息发送 4 Bob接收与发送消息 5 Alice接收消息 6消息的增删改查 6.1 删除消息 6.2查询消息 6.3修改/增加消息 7定理证明——重要目的 案例背景&#xff1a; (1)构建一个交互式的通讯方案&#xff1b; (2)攻击者控制了所有的通讯…

眼见不一定为实之MySQL中的不可见字符

目录 前言 一、问题的由来 1、需求背景 2、数据表结构 二、定位问题 1、初步的问题 2、编码是否有问题 3、依然回到字符本身 三、深入字符本身 1、回归本质 2、数据库解决之道 3、代码层解决 四、总结 前言 在开始今天的博客内容之前&#xff0c;正在看博客的您先来…

Element-UI实现el-dialog弹框拖拽功能

在实际开发中&#xff0c;会发现有些系统&#xff0c;弹框是可以在浏览器的可见区域自由拖拽的&#xff0c;这极大方便用户的操作。但在查看Element-UI中弹框&#xff08;el-dialog&#xff09;组件的文档时&#xff0c;发现并未实现这一功能。不过也无须担心&#xff0c;vue中…

Day 28:2748. 美丽下标对的数目

Leetcode 2748. 美丽下标对的数目 给你一个下标从 0 开始的整数数组 nums 。如果下标对 i、j 满足 0 ≤ i < j < nums.length &#xff0c;如果 nums[i] 的 第一个数字 和 nums[j] 的 最后一个数字 互质 &#xff0c;则认为 nums[i] 和 nums[j] 是一组 美丽下标对 。 返回…