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

  • 已申报税额是什么意思,要交吗
  • 土地原值要计入房产税计税@基数吗
  • 哪些资产损失应向税务机关申报扣除?
  • 已经开了发票需要退款怎么处理
  • 企业所得税季报时间
  • 费用票如何做账务处理
  • 公司抬头的发票
  • 0申报是不是不需要填数据
  • 代开发票的小微企业如何享受税收优惠
  • 无形资产报废会计科目
  • 不可修复废品损失会计分录
  • 公司法人信息变更是先去税务局还是先去银行
  • 确认投资收益是按照出资比例还是股权比例
  • 税控盘月度统计表怎么打印
  • 写着个人的发票能下账吗
  • 固定资产一次性计入费用的账务处理
  • 已付款未收到发票
  • 预缴和实际应付的区别
  • 土地税返还的会计分录
  • 分公司固定资产转入总公司的分录怎么做?
  • 学校维修维护费包括哪些
  • 加计扣除农产品进项税额
  • 税务总局关于四流一致解答
  • 销售单怎么设置打几行
  • 建筑业增值税会计核算是哪门课的内容
  • 抵押房屋可以出卖吗
  • php字符串函数有哪些
  • 融资租赁与经营租赁的区别主要是
  • 年底会计结账
  • ctl.start
  • 装修费用账务怎么处理
  • 存货损失账务处理新规定
  • 取得投资是什么意思
  • 坏账准备的借贷方向表示什么意思
  • php二维数组按某个键值排序
  • php获取浏览器ua
  • mediapipe objectron
  • smb命令执行
  • PHP+mysql+ajax轻量级聊天室实现方法详解
  • ps打不出字怎么回事
  • 中国烟草资产负债表
  • 小微企业减免额怎么计算
  • 织梦图片集如何调用
  • jsp连接数据库的步骤
  • 小规模教育培训怎样纳税
  • 坏账准备的账务处理会计分录
  • 写个电影剧本多少钱
  • 利润分配科目是所有者权益科目吗
  • 跨年度收取的租金是什么
  • 国家知识产权专利网
  • 给员工发工资时要交税吗
  • 教育培训机构的老师可以评职称吗
  • 应交的教育费附加通过什么科目核算
  • 税控系统维护费可以全额抵扣吗
  • 在企业中的应用
  • 暂估应付账款余额在贷方
  • xp恢复回收站删除文件
  • linux 对比文件
  • centos 命令行
  • agentctl.dll
  • win8.1原版系统安装教程
  • archlinux 配置网络
  • windows10预览版怎么样
  • 在linux中使用apache发布web服务时默认web站点
  • recyclerview addview
  • 置顶在线
  • shell脚本编写
  • javascript+css3开发打气球小游戏完整代码
  • python的linux
  • 查cpu内存命令
  • unity减少drawcall
  • javascriptcsdn
  • 用javascript
  • js文件保存
  • jquery自定义函数
  • python九大特点
  • 四川国税发票真伪查询
  • 大征期和小征期的区别
  • 在本地买车怎么上外地牌照
  • 潍坊市市区
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设