位置: IT常识 - 正文

vue3中使用axios(vue3中使用window方法)

编辑:rootadmin
vue3中使用axios vue3中使用axios1.axios在vue3.x中的基础入门使用

推荐整理分享vue3中使用axios(vue3中使用window方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0使用axios,vue3中使用require,vue3中使用pinia,vue3中使用pinia,vue3中使用for循环引用多个组件,vue3中使用gis地图,vue3中使用for循环引用多个组件,vue3中使用for循环引用多个组件,内容如对您有帮助,希望把文章链接给更多的朋友!

在不涉及使用axios进行请求拦截以及响应拦截的场景下,axios的使用可以简化为以下步骤。

step1. 使用npm安装axios

npm install axios

step2. 我们将要使用的axios实例单独编写成一个js文件,文件夹可以建立在src/plugins/(自己选择建立在什么地方)。命名为: axiosInstance.js

//axiosInstance.js//导入axiosimport axios from 'axios'//使用axios下面的create([config])方法创建axios实例,其中config参数为axios最基本的配置信息。const API = axios.create({baseUrl:'http://localhost:8080' //请求后端数据的基本地址,自定义timeout: 2000 //请求超时设置,单位ms})//导出我们建立的axios实例模块,ES6 export用法export default API

step3. 然后在main.js中导入我们编写axiosInstance.js文件,全局配置一下axios的引用。

//main.jsimport { createApp } from 'vue'import App from './App.vue'import axios from '@/plugins/axiosInstance.js'const app = createApp(APP); //建立一个vue3appapp.mount('#app'); //将这个vue3app全局挂载到#app元素上app.config.globalProperties.$axios=axios; //配置axios的全局引用vue3中使用axios(vue3中使用window方法)

step4. 就是在我们需要进行aixos请求的地方进行使用了,为了方便演示,使用mockjs进行模拟后端接口,

以下是mockjs的基础入门使用

安装mockjs

npm install mockjs

然后在我们的src/ 路径下建立一个用于存放mock模拟数据的文件,就叫index.js吧,此时层级关系为:

/src/mock/index.js, 在 这个index.js中编写我们关于mock模拟数据的配置以及需要请求的数据,如下:

// src/mock/index.jsimport Mock form 'mockjs' //导入mockjs//使用Mock下面提供的mock方法进行需要模拟数据的封装//参数1,是需要拦截的完整请求地址,参数2,是请求方式,参数3,是请求的模拟数据const testData = Mock.mock('http://localhost:8080/test','get',{status:200, //请求成功状态码dataList:[1,2,3,4,5,6,7,8,9,10] //模拟的请求数据})//导出export default testData

在main.js里面全局引用一下我们的编写的相关mockjs

//导入mockimport './mock/'

mockjs简单配置也完成了,下面就在创建的初始 /about 页面简单编写一个请求测试是否成功

//About.vue<template> <div class="about"> <h1>This is an about page</h1> <button @click="getData()">test axios 请求数据</button> <p>这是请求到的数据{{testData.list}}</p> </div></template><script>import { reactive } from '@vue/reactivity'import API from "../plugins/axiosInstance"export default{ name:'About', setup(){ //数据 const testData = reactive({ list:[] }); //测试请求方法 const getData = function(){ API({ url:'/test', method:'get' }).then((res)=>{ alert('请求成功!'); testData.list = res.data.dataList; }); } return{ testData, getData, } }}</script>

结果

本文链接地址:https://www.jiuchutong.com/zhishi/299917.html 转载请保留说明!

上一篇:Java面试题及答案整理汇总(2023最新版)(java面试题及答案下载)

下一篇:(pytorch进阶之路)IDDPM之diffusion实现(pytorch教程)

  • 微博离线缓存的视频在哪里(微博离线缓存的视频在哪)

    微博离线缓存的视频在哪里(微博离线缓存的视频在哪)

  • beatx开机闪3下就关了

    beatx开机闪3下就关了

  • 知到视频可以跳着看吗(知到视频怎么跳)

    知到视频可以跳着看吗(知到视频怎么跳)

  • 微信朋友圈被永久封,多久时间才能恢复(微信朋友圈被永久封 能申诉吗)

    微信朋友圈被永久封,多久时间才能恢复(微信朋友圈被永久封 能申诉吗)

  • 9v电池是几号电池(9v电池是干嘛用的)

    9v电池是几号电池(9v电池是干嘛用的)

  • z8350处理器相当于i几(z8350cpu性能相当于台机什么级别)

    z8350处理器相当于i几(z8350cpu性能相当于台机什么级别)

  • 陌陌注销后怎么恢复(陌陌注销后怎么注册不了)

    陌陌注销后怎么恢复(陌陌注销后怎么注册不了)

  • 华为nova7se有nfc功能吗(华为nova7SE有nfc功能在哪里)

    华为nova7se有nfc功能吗(华为nova7SE有nfc功能在哪里)

  • 苹果停用连接itunes里面东西是不是会没有(苹果停用连接itunes修多少钱)

    苹果停用连接itunes里面东西是不是会没有(苹果停用连接itunes修多少钱)

  • 怎么在wps上保存音频(怎么在wps上保存到桌面)

    怎么在wps上保存音频(怎么在wps上保存到桌面)

  • qqwifi在线就在玩手机吗(qq显示wifi在线)

    qqwifi在线就在玩手机吗(qq显示wifi在线)

  • hd通话收费吗(hd通话耗流量吗)

    hd通话收费吗(hd通话耗流量吗)

  • 美团众包怎么更换工作城市(美团众包怎么更改拨打手机号码)

    美团众包怎么更换工作城市(美团众包怎么更改拨打手机号码)

  • 拼多多的省钱月卡怎么取消(拼多多的省钱月卡)

    拼多多的省钱月卡怎么取消(拼多多的省钱月卡)

  • 手机qq怎么图片文字一起发(手机qq怎么图片和文字一起发消息)

    手机qq怎么图片文字一起发(手机qq怎么图片和文字一起发消息)

  • 抖音人工审核要多久(抖音人工审核都审什么)

    抖音人工审核要多久(抖音人工审核都审什么)

  • 通话中断痕迹怎么删除(通话中断怎么恢复)

    通话中断痕迹怎么删除(通话中断怎么恢复)

  • ios13酷狗铃声设置不了(ios酷狗音乐设置手机铃声)

    ios13酷狗铃声设置不了(ios酷狗音乐设置手机铃声)

  • iqoo怎么坐地铁(iqooneo3怎么刷公交卡)

    iqoo怎么坐地铁(iqooneo3怎么刷公交卡)

  • 微博怎么把经常访问删掉(微博怎么把经常访问放在功能卡片)

    微博怎么把经常访问删掉(微博怎么把经常访问放在功能卡片)

  • 大会员qq有啥用

    大会员qq有啥用

  • opporeno和renoz的区别(opporeno和opporenoz的区别)

    opporeno和renoz的区别(opporeno和opporenoz的区别)

  • 数据链路层的主要功能(数据链路层的主要功能不包括)

    数据链路层的主要功能(数据链路层的主要功能不包括)

  • c6cn c6c区别(c6c和c6tc)

    c6cn c6c区别(c6c和c6tc)

  • 苹果手机id被锁解决方法(苹果手机id被锁定什么意思)

    苹果手机id被锁解决方法(苹果手机id被锁定什么意思)

  • win10教育版升级专业版教程(win10教育版升级win11)

    win10教育版升级专业版教程(win10教育版升级win11)

  • 收到政府的补贴收入现金流量表填哪里
  • 餐饮业小规模开发票开什么
  • 个人所得税六项专项附加扣除是什么
  • 哪些津贴不扣税
  • 万元版增值税发票最多可以开多少
  • 滞纳金海关
  • 音乐茶座取什么名字好呢
  • 无发票材料可以入材料账吗
  • 研发样机是什么
  • 公积金账户收入
  • 国税的申报表季报本月数如何填写?
  • 自产自销农产品企业所得税
  • 发票作废是不是很麻烦
  • 海关进口增值税专用缴款书如何抵扣
  • 差额纳税和全额纳税比例
  • 公司对公账户每年费用
  • 模板摊销率
  • 劳务和工资合并扣税吗
  • 工会经费的会计分录2023
  • 工会财务总结报告
  • 委托贷款利息收入增值税
  • 小规模纳税人代理销售税率是多少
  • 跨年的发票可以补开吗
  • 收到银行存款利息记账凭证怎么写
  • 什么是suv汽车
  • 红冲以前年度暂估成本如何做账
  • 代金券与抵扣券的区别
  • linux系统中查看进程的命令
  • 根据新企业会计准则,职工薪酬包括
  • 海月水母有性别吗
  • 日本东京秋叶原攻略
  • 股权投资收益需要缴纳企业所得税吗
  • 西西弗书店主管级
  • vue3组件写法
  • 第二季度所得税怎么算
  • vue computed set get
  • 热闻丨ChatGPT会替代你我吗?让它写了封情书后,我得到答案
  • 文件上传模板怎么弄
  • 小规模纳税人能开6%增值税专用发票吗
  • 未达到起征点的增值税怎么填写
  • 交通费比例
  • 年度一次性奖励扣税
  • 非流动资产基金 新会计制度 对应
  • 去年发生了什么
  • 个体工商户税务登记需要哪些资料
  • 公司内控制度由谁制定
  • 交通费 抵扣
  • 财务报表上期金额是指什么意思
  • sql server操作教程
  • 个人所得税申请退税多久能到账
  • 交易性金融资产包括哪些项目
  • 缴纳车辆购置税有发票吗
  • 期初建账明细账怎么建账
  • 哪些行业不能开电子发票
  • 小规模纳税人年底做账
  • 待认证进项税额期末怎么办
  • 分公司注销余额转总公司会计分录
  • 企业偿债能力的含义
  • 房地产企业成本控制存在的问题及对策
  • mysql事务视图
  • windows中任务栏
  • 什么是活动目录和域
  • vmware虚拟机关机快捷键
  • linux之间拷贝文件
  • psoft1.exe - psoft1是什么进程 有什么作用
  • 查找返回一行数据
  • WIN10专业版怎么查看操作位数
  • apache for mac
  • chkdsk命令有什么用
  • win10蓝屏故障
  • shell脚本 定义变量
  • 使用jquery
  • 火狐浏览器自定义滚动条
  • js表单验证实例怎么写
  • 安全模式安卓
  • shell脚本数组的用法
  • javascript的dom
  • python3.6安装pil
  • 堆栈模式都是什么意思
  • 长沙税务网站查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设