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

  • 2017不变的营销规律(不断变化的营销战略带来了什么影响)

    2017不变的营销规律(不断变化的营销战略带来了什么影响)

  • iQOO10怎么关闭拍照声音(iqoo10怎么关闭拍照声音)

    iQOO10怎么关闭拍照声音(iqoo10怎么关闭拍照声音)

  • dota是什么意思中文(dota是什么)

    dota是什么意思中文(dota是什么)

  • 手机蓝牙耳机丢失找不到了怎么办(手机蓝牙耳机丢了一只怎么找另外一只)

    手机蓝牙耳机丢失找不到了怎么办(手机蓝牙耳机丢了一只怎么找另外一只)

  • qq隐身访问空间对方还能看到吗(qq隐身访问空间看相册会有记录吗)

    qq隐身访问空间对方还能看到吗(qq隐身访问空间看相册会有记录吗)

  • 微信被限制收款是因为什么(微信被限制收款怎么解除)

    微信被限制收款是因为什么(微信被限制收款怎么解除)

  • 电脑怎么把桌面文件放到d盘(电脑怎么把桌面默认c盘改到D盘)

    电脑怎么把桌面文件放到d盘(电脑怎么把桌面默认c盘改到D盘)

  • 抖音怎么设置下载视频权限(抖音怎么设置下滑自动播放下一条)

    抖音怎么设置下载视频权限(抖音怎么设置下滑自动播放下一条)

  • QQ邮箱怎么发送视频到别人的邮箱(qq邮箱怎么发送视频)

    QQ邮箱怎么发送视频到别人的邮箱(qq邮箱怎么发送视频)

  • 微信会掉下表情的文字(微信会掉下来的表情)

    微信会掉下表情的文字(微信会掉下来的表情)

  • qq水果标识怎么弄(水果qq头像可爱卡通)

    qq水果标识怎么弄(水果qq头像可爱卡通)

  • 笔记本80多度正常吗(笔记本70-80度)

    笔记本80多度正常吗(笔记本70-80度)

  • 微信朋友圈指定人看其他能不能看到(微信朋友圈指定人可见新加的好友能看到吗)

    微信朋友圈指定人看其他能不能看到(微信朋友圈指定人可见新加的好友能看到吗)

  • 手机充不上电还掉电怎么办(手机充不上电还倒电是怎么回事)

    手机充不上电还掉电怎么办(手机充不上电还倒电是怎么回事)

  • airpod蓝牙耳机已连接为什么没有声音(airpods突然连不上蓝牙却显示已连接)

    airpod蓝牙耳机已连接为什么没有声音(airpods突然连不上蓝牙却显示已连接)

  • 苹果11夜拍怎么开启(苹果11夜拍怎么打开)

    苹果11夜拍怎么开启(苹果11夜拍怎么打开)

  • 群里发红包最多发多少(红包群)

    群里发红包最多发多少(红包群)

  • 您拨叫的用户正忙什么意思(您拨叫的用户正忙)

    您拨叫的用户正忙什么意思(您拨叫的用户正忙)

  • 怦然心动漫画(怦然心动漫画结局)

    怦然心动漫画(怦然心动漫画结局)

  • 苹果x后台怎么关

    苹果x后台怎么关

  • 桌面的文件怎么发QQ邮箱(桌面的文件怎么隐藏起来)

    桌面的文件怎么发QQ邮箱(桌面的文件怎么隐藏起来)

  • 抖音怎么弄淘宝购物车(抖音怎么弄淘宝链接上去)

    抖音怎么弄淘宝购物车(抖音怎么弄淘宝链接上去)

  • 拍照带时间怎么设置(拍照带时间怎么比实际时间提前)

    拍照带时间怎么设置(拍照带时间怎么比实际时间提前)

  • win10电脑扬声器没声音(win10电脑扬声器正常但是没有声音)

    win10电脑扬声器没声音(win10电脑扬声器正常但是没有声音)

  • deepin20文件怎么共享? deepin文件共享给windows的技巧(deepin 文件管理器)

    deepin20文件怎么共享? deepin文件共享给windows的技巧(deepin 文件管理器)

  • 增值税有哪几类
  • 不征税收入和免税收入所对应的成本与费用能否税前扣除
  • 企业所得税季度预缴可以弥补以前年度亏损吗
  • 合同金额含税不含税
  • 企业的培训费会计分录
  • 周转材料低值易耗品科目借方登记低值易耗品的减少
  • 固定资产抵扣对账怎么算
  • 编制现金流量表的直接法和间接法
  • 结转已完工产品会计分录
  • 购买设备送给客户帐务处理是怎样的?
  • 土地受让人是什么意思
  • 业务招待费扣除计算举例说明
  • 减免税款交企业所得税吗
  • 公司单位员工餐费怎么算
  • 小规模税控盘服务费怎么填增值税申报表
  • 合伙企业年度汇缴申报
  • 个体户怎么给供货公司
  • 公司自己的食堂需要办理食品经营许可证吗
  • 1697508933
  • 个人租赁汽车给公司怎么开发票
  • 保税区内的货物交易
  • 企业采用的会计计量基础属于什么
  • macbookpro怎么安装双系统
  • 计算机存储信息的基本单位是( )A字长B速度C内存D字节
  • srv.exe病毒
  • win10输入法没有候选词
  • 结转本月发生的费用
  • 民办非企业的税金及附加放在哪个科目
  • 错误申报多交增值税已经扣税
  • php5升级到php7
  • 坏账准备的会计科目
  • php pathinfo
  • 买入返售金融资产和卖出回购金融资产
  • php批量处理数据
  • uniapph5微信支付
  • php session_id
  • 有限公司股权转让的规定最新
  • php弹出登录框
  • cpu占满gpu不工作
  • 残疾人就业保障金计入什么科目
  • 预收款怎么做表格
  • 账面价值是历史价值吗
  • 工会经费计提按应付职工薪酬借方还是贷方?
  • php框架 hyperf
  • 物业费按年收
  • 配置英文
  • 企业信息联网核查系统的意义
  • 企业所得税汇算清缴会计分录
  • 扣税8%
  • 企业注销后账务保留多久
  • 固定资产盘亏所得税清算时怎么处理
  • 福利费列支范围及标准
  • 个体户所得税税率多少
  • 跨年的个人所得税可以更正吗
  • 废品损失是什么要素
  • 预付账款有余额吗
  • 库存商品暂估入库是什么意思
  • 如何结转生产成本至库存商品
  • fedora win10
  • cmd命令 cd
  • scanfile.exe
  • 如何查看文件系统
  • 如何设置windows启动密码
  • linux ./执行
  • win10系统打开word出现水渍
  • 微软推出windows1
  • window10稳定版
  • win7关闭文件夹和内容一起显示
  • linux用户配置文件是什么
  • jquery给表格赋值
  • 到了这个年纪吉他谱完整版
  • unity 面向对象
  • js 编程
  • jquery 鼠标
  • 如何将个税人员信息改为非正常
  • 柴油计入什么科目
  • 四川税务干部学校官网
  • 临时增版
  • 2014年房产税征收标准
  • 2017企业所得税年度申报表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设