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

  • 荣耀50蓝牙耳机如何连接(荣耀50蓝牙耳机怎么显示电量)

    荣耀50蓝牙耳机如何连接(荣耀50蓝牙耳机怎么显示电量)

  • 零钱通明细能删除吗(零钱通明细删除了还能查询吗)

    零钱通明细能删除吗(零钱通明细删除了还能查询吗)

  • 苹果手机如何取消微信置顶(苹果手机如何取出sim卡)

    苹果手机如何取消微信置顶(苹果手机如何取出sim卡)

  • 华为 nova 7 pro 5g机身尺寸是多大(华为nova7pro5g手机多少钱)

    华为 nova 7 pro 5g机身尺寸是多大(华为nova7pro5g手机多少钱)

  • 微信没有网络可以计步吗(微信没有网络可以删除好友吗)

    微信没有网络可以计步吗(微信没有网络可以删除好友吗)

  • 手机微信语音功能在哪里打开(手机微信语音功能用不了怎么回事)

    手机微信语音功能在哪里打开(手机微信语音功能用不了怎么回事)

  • 电脑怎么把视频放在一个文件夹里面(电脑怎么把视频转成mp3音频)

    电脑怎么把视频放在一个文件夹里面(电脑怎么把视频转成mp3音频)

  • 屏幕有一块区域失灵(屏幕有一块区域变暗)

    屏幕有一块区域失灵(屏幕有一块区域变暗)

  • 鼠标左边的2个键有什么作用(鼠标左边的2个按钮)

    鼠标左边的2个键有什么作用(鼠标左边的2个按钮)

  • 为什么苹果手机天气显示的是70多度(为什么苹果手机充电充不进去了)

    为什么苹果手机天气显示的是70多度(为什么苹果手机充电充不进去了)

  • miui是什么牌子(miui是什么牌子手机多少钱)

    miui是什么牌子(miui是什么牌子手机多少钱)

  • oppo怎么召唤语音助手(OPPO怎么召唤语音)

    oppo怎么召唤语音助手(OPPO怎么召唤语音)

  • 哈罗单车一直发欠费短信(哈罗单车一直发短信)

    哈罗单车一直发欠费短信(哈罗单车一直发短信)

  • qq卡顿怎么解决(qq很卡顿怎么办)

    qq卡顿怎么解决(qq很卡顿怎么办)

  • 京东说拆封不退怎么退(京东已拆封不给退怎么办)

    京东说拆封不退怎么退(京东已拆封不给退怎么办)

  • 苹果x有线耳机怎么用(苹果x有线耳机怎么连接)

    苹果x有线耳机怎么用(苹果x有线耳机怎么连接)

  • 为什么设置了来电秀不显示视频(为什么设置了来电视频不显示?)

    为什么设置了来电秀不显示视频(为什么设置了来电视频不显示?)

  • 苹果无线耳机操作手势(苹果无线耳机操作)

    苹果无线耳机操作手势(苹果无线耳机操作)

  • 手机的私密空间在哪找(手机的私密空间怎么看)

    手机的私密空间在哪找(手机的私密空间怎么看)

  • 什么是数字化时代(什么是数字化时代的AI数字员工?)

    什么是数字化时代(什么是数字化时代的AI数字员工?)

  • 探探暗恋成功怎么取消(探探暗恋成功会发短信吗)

    探探暗恋成功怎么取消(探探暗恋成功会发短信吗)

  • 华为碎屏险在哪里查看(华为碎屏险在哪里买划算?)

    华为碎屏险在哪里查看(华为碎屏险在哪里买划算?)

  • 三星乐盖a80防水吗(三星盖乐世a80)

    三星乐盖a80防水吗(三星盖乐世a80)

  • 怎么设置电脑黑屏时间(怎么设置电脑黑屏后再开需要密码)

    怎么设置电脑黑屏时间(怎么设置电脑黑屏后再开需要密码)

  • benser.exe是什么进程 benser进程的作用是什么(.exe是什么文件)

    benser.exe是什么进程 benser进程的作用是什么(.exe是什么文件)

  • 注册资本印花税减半征收政策
  • 利息收入需要缴纳企业所得税吗
  • 工业增加值怎么找
  • 收到货款会计分录怎么做
  • 网上商城的主要功能以及购物流程
  • 去年的电费可以在今年入账分录
  • 文化创意服务的税率
  • 先报个税还是先报增值税,有影响吗?
  • 出资款在现金流中怎么体现
  • 怎么从其他公司挖人
  • 做内帐和外账需要多久
  • 开立基本账户所需资料
  • 办公室购置空调的词语
  • 公司亏损没有收入怎么办
  • 小规模纳税人的税率是多少
  • 小规模纳税人可以抵扣进项税吗
  • 营改增相关规定
  • 农产品增值税优惠政策2021
  • 不缴地税国税可停票吗?
  • 公司买的食用油会计分录
  • 太阳能真空管和普通管的区别
  • 电子承兑汇票支付信用查询
  • 房产代理公司收客户钱违法
  • lec风险评价方法
  • 发票查出来显示不一致是为啥
  • 车票进项税可以跨年抵扣吗
  • 会计新手入门
  • 费用转入本年利润
  • 鸿蒙系统开发人员选项
  • 外贸公司要计提什么费用
  • 增值税的滞纳金是多少
  • uniapp小程序自定义tabbar在iOS手机上太高了
  • 付的押金冲抵部分怎么算
  • 营改增后固定资产报废处置收入计税
  • 雪山上的老鼠
  • 新准则有哪些
  • 税收协定与国内税法发生冲突
  • Pinia(二)了解和使用Store
  • CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
  • 即征即退增值税怎么申报
  • php文件用什么运行
  • php验证终端类型是什么
  • 总账是按年还是按月结账
  • 因质量原因退货和召回的产品,均应按照规定
  • 建筑业总包增值税
  • 手机话费怎么打发票
  • 税金及附加包括哪些
  • 对方不给开发票做账可以直接出费用吗?
  • 微擎框架是开源的吗
  • 带附件的目录
  • 什么企业符合高新技术企业
  • 支付债券发行费怎么算
  • 增值税专用发票怎么开
  • 金税四期视频
  • 利润分配的账务处理视频
  • 资产处置收益的核算内容
  • 预缴土地增值税税率表2023年最新
  • 材料退库的流程
  • 微信转账如何处理退回去
  • 去年亏损今年盈利同比怎么算
  • 劳务派遣公司如何赚钱的?
  • 待抵扣进项税额和待认证进项税额的区别
  • 会计原材料的账怎么记账
  • 年报审计调整
  • 经营性应收项目的计算公式
  • 对方开普票,怎么扣税
  • 出口转内销账务处理以前年度
  • 商品型企业
  • mysql分表实践
  • Mysql使用or如何优化
  • spoolsv.exe是什么文件
  • windowsxp有密码忘了怎么办
  • centos7 ifcfg-lo
  • windows2008输入法
  • cocos2dx ccbreader内存泄露
  • perl读取文件内容到数组
  • Android studio 打包apk后卡在首屏
  • js 堆排序
  • javascript new fun的执行过程
  • 外购的解释
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设