位置: 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教程)

  • 华为手机微博开启相机权限在哪设置(华为手机微博通知提醒怎么设置)

    华为手机微博开启相机权限在哪设置(华为手机微博通知提醒怎么设置)

  • 滴滴注册不了(滴滴注册不了用什么打车软件)

    滴滴注册不了(滴滴注册不了用什么打车软件)

  • 如何下载qq号(如何下载qq聊天软件)

    如何下载qq号(如何下载qq聊天软件)

  • 微信聊天记录别人能调出来吗(微信聊天记录别人可以查出来吗)

    微信聊天记录别人能调出来吗(微信聊天记录别人可以查出来吗)

  • 荣耀x10发布会时间地点(荣耀x10发布会内容)

    荣耀x10发布会时间地点(荣耀x10发布会内容)

  • 钉钉能同时登录两个账号吗

    钉钉能同时登录两个账号吗

  • 被回收的qq好友还能看见吗(qq被回收了好友还能看见照片吗?)

    被回收的qq好友还能看见吗(qq被回收了好友还能看见照片吗?)

  • 滴滴出行取消订单钱什么时候退(滴滴出行取消订单怎么取消)

    滴滴出行取消订单钱什么时候退(滴滴出行取消订单怎么取消)

  • iphonex绿屏了怎么办(苹果x绿屏了)

    iphonex绿屏了怎么办(苹果x绿屏了)

  • 大王卡为什么用着用着不能用网络了(大王卡为什么用流量为什么3G)

    大王卡为什么用着用着不能用网络了(大王卡为什么用流量为什么3G)

  • 无线插座是无线传电吗(无线插座是无线充电器吗)

    无线插座是无线传电吗(无线插座是无线充电器吗)

  • 淘宝怎么设置密码锁不让别人看(淘宝怎么设置密码支付)

    淘宝怎么设置密码锁不让别人看(淘宝怎么设置密码支付)

  • 平板电脑软件停止运行怎样才能恢复(平板电脑软件停止运行如何解决)

    平板电脑软件停止运行怎样才能恢复(平板电脑软件停止运行如何解决)

  • sdd硬盘是什么(sdd sata)

    sdd硬盘是什么(sdd sata)

  • TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

    TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

  • xs max怎么开机(xsmax怎么开机)

    xs max怎么开机(xsmax怎么开机)

  • 冯诺依曼计算机的基本结构(冯诺依曼计算机的特点)

    冯诺依曼计算机的基本结构(冯诺依曼计算机的特点)

  • 大众点评d币在哪里找(大众点评dq)

    大众点评d币在哪里找(大众点评dq)

  • 小米手机发语音没声音怎么回事(小米手机发语音有杂音怎么回事)

    小米手机发语音没声音怎么回事(小米手机发语音有杂音怎么回事)

  • 小米的悬浮球有什么有功能(小米的悬浮球有什么用处)

    小米的悬浮球有什么有功能(小米的悬浮球有什么用处)

  • 电脑怎么安装(电脑怎么安装win10系统)

    电脑怎么安装(电脑怎么安装win10系统)

  • typec接口和micro区别(typec接口和micro接口)

    typec接口和micro区别(typec接口和micro接口)

  • wps是干嘛用的(wps是用来干什么用的)

    wps是干嘛用的(wps是用来干什么用的)

  • qq拍照提取文字(扣扣拍照提取文字)

    qq拍照提取文字(扣扣拍照提取文字)

  • 云计算技术(ICT)课后习题答案(云计算技术是学什么的)

    云计算技术(ICT)课后习题答案(云计算技术是学什么的)

  • 多缴纳社保怎么处理
  • 增值税发票综合服务平台验证口令失败
  • 分成收入计入什么科目
  • 混合销售行为的基本特征不包括
  • 增值税发票是什么纸张型号
  • 固定资产出售如何申报增值税
  • 什么是存货周转率?存货周转率的意义是什么
  • 会计凭证的数字书写示例图
  • 预收账款借方和贷方表示什么
  • 季度利润表格式
  • 银行存款缴纳所得税费用会计分录
  • 外商投资企业是中国企业吗
  • 行政单位拨给下属单位经费会计分录
  • 个人收到的国外短信
  • 员工就诊发票可以报销吗
  • 收到3%的增值税专用发票可以抵扣吗
  • 企业所得税如何计提会计分录
  • 文化传媒行业会计
  • 什么叫未完税
  • 注册公司之后需要交社保吗
  • 分包抵扣计算
  • 付下一年房租会计分录
  • 企业发给员工的福利要交税吗
  • 控股子公司是
  • 企业停工期间发放工资
  • 进项税额已经认证抵扣了怎么处理
  • 华为鸿蒙系统如何关闭hd通话
  • 基建期增值税如何抵扣
  • 内存条松动导致黑屏
  • 公司股权转让的印花税谁来承担
  • 劳务服务包括哪些范围
  • 农产品抵扣进项税额转出
  • 教程图怎么做
  • ocxdll.exe - ocxdll是什么进程 有什么用
  • 一般纳税人辅导期最新规定
  • 好奇地看着我
  • 实物资产的管理
  • 购买原材料月末需要结转吗
  • thinkphp count
  • php curl_exec
  • html用语
  • java中的泛型的好处
  • hashmap教程
  • 建筑劳务税率是13还是6
  • 退税没有退的部分怎么做账
  • tempdb数据库能删么
  • 有没有网上学电脑的
  • 机械租赁费税率是多少
  • 金税盘已作废发票可以取消吗
  • 普通发票该可以抵扣吗
  • 一个简单的脚本
  • 销售返利可以税前扣除吗
  • 合伙企业可以退出吗
  • 工会经费和福利费绩效目标怎么写
  • 职工教育经费能开专票吗
  • 汇算清缴期间费用福利费填哪里
  • 关联方资金往来是否收取利息
  • 商业承兑到期对方不付款会计分录
  • 出口汇率按报关价格算吗
  • 企业专家咨询费标准
  • 应付职工薪酬属不属于流动负债
  • 开始建账需要哪些数据
  • mysqladmin ping
  • mysql的基本介绍
  • linux获取进程启动时间
  • aliwssv.exe是什么进程
  • ubuntu20.04设置共享文件夹
  • os x10.11el capitan beta3下载地址
  • w7打穿越火线
  • linux tar压缩文件命令
  • windows11内测版
  • 局域网下访问vue点击无反应
  • html用div来写表格
  • AJAX和jQuery动态加载数据的实现方法
  • 你可能不知道的湖北
  • 批处理结束后不关闭窗口
  • 原生js常用的方法
  • android support包
  • python中判断语句怎么写
  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设