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

  • 生产型企业进项税加计扣除
  • 延期缴纳税款是纳税争议吗
  • 缴纳印花税的会计凭证
  • 企业对公账户钱怎么取出来
  • 银行代发工资必须交社保吗
  • 个税申报逾期罚款怎么交
  • 折扣金额发票
  • 投资性房地产房产税应按从价还是从租
  • 贩卖增值税发票怎么判刑
  • 会计凭证保管的含义及要求
  • 公司从基本户转钱到一般户走流程?
  • 有留抵税额的会计处理
  • 总公司的哪些费用要交税
  • 电子版A4黑白发票可以抵税吗?
  • 案例分析关于团员青年的思想困惑疏导和成长问题释疑
  • 借贷在会计中的增和减
  • 金税盘开票信息修改
  • 支付版权费用怎么入账
  • 以前年度少计费用,调整分录
  • win7系统的系统配置里设置开机启动项
  • 信息技术费用如何做分录
  • 共管帐户的特点是什么
  • win10打开txt
  • 经营租入的设备计入什么科目
  • win10电脑记事本在哪
  • 房地产评估计费
  • 厂家赠送的原材料怎么入账
  • php get post
  • php常用设计模式(大总结)
  • 期间费用包含哪些
  • 赊销商品属于什么信用
  • 科研项目财政拨款多少
  • 小程序开发一个多少钱啊
  • js如何随机生成字符串
  • 未税收入怎么做分录
  • python输入三个数判断能否构成三角形
  • 纳税人在工作
  • 建筑保温材料出台了哪些限制政策
  • 房地产企业预缴增值税会计处理
  • 销售发票重复开库存商品如何处理?
  • SQL Server 2008 Express如何开启远程访问
  • access中宏是按什么调用的
  • 金蝶暂存凭证怎样转正常凭证
  • 待报解预算收入怎么做账
  • 公司年终奖要做多久才能享受
  • 会计手工做账的目的
  • 跨年的进项税额转出要补交税款吗
  • 资本金利润率正常范围
  • 减免的残保金怎么做分录
  • 财务费用利息收入的账务处理
  • 银行收到工伤保险费怎么做分录
  • 拆迁房视同销售成本可以抵减吗?
  • 发票作废后对方还能认证吗
  • 零售商品的经营特点有什么(多选题)
  • sqlserver索引类型区别
  • sql取两个时间的间隔天数
  • 如何实现多条件查询
  • 路由怎么配
  • Linux系统复制图片
  • mac地图怎么标记多个位置
  • 安装centos图形界面
  • winproxy.exe - winproxy是什么进程
  • win8系统崩溃怎么办
  • 360win7
  • 打开本地搜索
  • win2008怎么查看隐藏文件
  • win10怎么旋转屏幕
  • win8显示隐藏文件夹
  • 可用分区az
  • 文件视图分为哪几种
  • unity怎么念
  • php运行linux命令
  • Git && GitHub 之远程协作
  • angularjs2
  • jquery悬浮窗
  • great 搬运工
  • android开发教程视频 好少
  • 陕西国税电子税务局app
  • 发票红冲产生费用吗?
  • 航信报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设