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

  • 增值税征税范围及税率
  • 建筑公司预收了款项已经开了增值税发票怎么做账
  • 应付账款坏账了怎么处理
  • 连号发票不许报销的具体发票类型
  • 存款利息单需要缴纳个人所得税吗
  • 公司购买的电脑怎么做账
  • 自产农产品免征增值税
  • 小规模纳税人怎么查询
  • 售后回购融资租赁合同
  • 材料折扣率
  • 单位给职工租房属于福利政策文件
  • 小规模季度30万免税怎么做账
  • 向职工出售住房
  • 企业所得税的账载金额和实际发生额
  • 政府补贴冲减资产原值
  • 会计做账中记账表怎么做
  • 融资租赁和融资性售后回租的区别
  • 小规模所得税申报表填写样本
  • 无形资产减值损失后能不能转回
  • 转出的进项税额是加还是减
  • 促销费影响主营利润吗
  • 单位出纳的业务有哪些
  • 准备购买材料会计分录
  • 忘记电脑开机密码怎么打开电脑
  • PHP:pg_field_num()的用法_PostgreSQL函数
  • 采购物资发生什么费用
  • PHP:zip_entry_compressedsize()的用法_Zip函数
  • php图片拼接
  • 非居民纳税人可以做汇算清缴吗
  • 交易性金融资产公允价值变动计入
  • 给员工报销
  • 网络安全网页设计作品构思
  • 注册公司填写从业人数多少合适
  • java微信公众号开发源码
  • 年度预算的意义
  • 收入的利息怎么记账
  • wordpress 设置
  • java替换集合的元素
  • access2010宏操作大全
  • 织梦相关文章调用
  • 汇算清缴交税怎么做账务处理
  • mdf和ndf文件
  • 百万级别数据库mysql
  • 不动产经营租赁发票开具注意
  • 服务费的增值税可以抵扣吗
  • 公立医院事业单位工作人员招聘实践考核自我评价
  • 固定资产清理的审计目标不包括
  • 扣除未结话费是什么意思
  • 待摊费用如何做账 税金怎么处理
  • 出口收汇核销单的作用
  • 一般纳税人支付房租账务处理
  • 暂估应付账款借贷方向
  • 以摊余成本计量的金融资产会计处理
  • 培训发票能抵扣吗
  • 应收利息可以计提坏账准备吗
  • 接受其他企业现金捐赠会计分录
  • 总分类账,明细分类账,日记账
  • 新冠肺炎疫情相关租金减让适用简化处理方法的时间范围
  • 向个人借款在现场怎么写
  • 什么是盈亏平衡法
  • sql server 数据查询
  • win10能玩dota
  • ubuntu14打开终端
  • win7开始菜单在哪个文件夹
  • centos基本环境
  • 电脑蓝屏0X0000007B
  • win10小娜怎么用不了
  • Win7如何关闭Smartscreen筛选器?Win7关闭Smartscreen筛选器的方法
  • linux安装有几种方法
  • linux最小安装和正常安装
  • 经过整理的一些成语
  • angular的排序管道
  • JavaScript中setAttribute用法介绍
  • 数据库的基本操作实验报告
  • 苹果macos安装
  • unity gui layer
  • easyui加载数据慢
  • 天津武清房管局电话
  • 12366纳税服务热线存在的问题
  • 山东地税app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设