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

  • 小米9pro什么时候出来(小米9pro什么时候更新miui13)

    小米9pro什么时候出来(小米9pro什么时候更新miui13)

  • oppo5g手机有哪些(oppo新款手机有哪些)

    oppo5g手机有哪些(oppo新款手机有哪些)

  • 荣耀v10有红外功能吗(honor v10有没有红外)

    荣耀v10有红外功能吗(honor v10有没有红外)

  • 苹果11语音控制打不开(苹果11语音控制怎么用)

    苹果11语音控制打不开(苹果11语音控制怎么用)

  • 华为p30两个系统怎么设置(华为p30两个系统怎么转换到新系统)

    华为p30两个系统怎么设置(华为p30两个系统怎么转换到新系统)

  • 网站进不去了怎么回事(网站进不去怎么弄)

    网站进不去了怎么回事(网站进不去怎么弄)

  • 大数据具有四大特征(大数据具有四大特点)

    大数据具有四大特征(大数据具有四大特点)

  • ios13.3适合什么机型(ios13.5好用吗)

    ios13.3适合什么机型(ios13.5好用吗)

  • 国内手机在国外能用吗(国内手机在国外能收到短信吗)

    国内手机在国外能用吗(国内手机在国外能收到短信吗)

  • 华为frdal10是啥型号(froal10华为是什么型号)

    华为frdal10是啥型号(froal10华为是什么型号)

  • eps用什么打开方式(eps用什么打开方式好)

    eps用什么打开方式(eps用什么打开方式好)

  • 手机怎么创qq群(手机怎么创qq群号)

    手机怎么创qq群(手机怎么创qq群号)

  • 华为freebud和荣耀flypods耳机对比(freebuds3和荣耀手机匹配吗)

    华为freebud和荣耀flypods耳机对比(freebuds3和荣耀手机匹配吗)

  • ie浏览器如何设置为默认浏览器(ie浏览器如何设置代理服务器)

    ie浏览器如何设置为默认浏览器(ie浏览器如何设置代理服务器)

  • 照片过大怎么处理变小(照片过大怎么处理变小到100k)

    照片过大怎么处理变小(照片过大怎么处理变小到100k)

  • p30设置24小时(华为p30怎么设置24小时制)

    p30设置24小时(华为p30怎么设置24小时制)

  • 安卓手机录音在哪里(安卓手机录音在哪里找到文件)

    安卓手机录音在哪里(安卓手机录音在哪里找到文件)

  • 电脑cpu温度(电脑cpu温度多少正常)

    电脑cpu温度(电脑cpu温度多少正常)

  • 【Mac与iPhone互动】怎么在苹果Mac 10.10上接打电话?(mac与iphone联动)

    【Mac与iPhone互动】怎么在苹果Mac 10.10上接打电话?(mac与iphone联动)

  • 华为鸿蒙HarmonyOS 2.0开发者Beta 3 2.0.0.128 log版今日发布(华为鸿蒙harmonyos官网4.0升级)

    华为鸿蒙HarmonyOS 2.0开发者Beta 3 2.0.0.128 log版今日发布(华为鸿蒙harmonyos官网4.0升级)

  • Kali Linux怎么修改默认whisker菜单图标?(kali linux怎么修改用户名)

    Kali Linux怎么修改默认whisker菜单图标?(kali linux怎么修改用户名)

  • python中TKinter的绑定方法(Python中tkinter的 Variable类)

    python中TKinter的绑定方法(Python中tkinter的 Variable类)

  • 织梦dedecms内容页调用栏目内容标签{dede:field.content/}(织梦cms要钱吗)

    织梦dedecms内容页调用栏目内容标签{dede:field.content/}(织梦cms要钱吗)

  • 保单税优识别码图片
  • 应交税费负数调整到其他非流动资产
  • 销售不动产营业税纳税义务发生时间
  • 主办会计跟会计有什么区别
  • 企业所得税属于地方税吗
  • 组装机配件
  • 间接持股比例怎么
  • 资产处理损益属于什么科目借贷方向
  • 合同租金总收入怎么填
  • 机动车换车
  • 购买旧资产如何入账
  • 划拨土地使用权多少年
  • 中央财政补贴政策
  • 年薪制离职补偿金如何计算?
  • 一般纳税人企业要交哪些税
  • 金税盘的年费怎么做抵扣帐
  • 提供物业管理服务的纳税人如何认定
  • 以前年度损益调整怎么用
  • 专项应付款增加记哪方
  • 申报预缴企业所得税
  • 成本无发票如何处理
  • 增值税电子发票没有发票专用章
  • 计算房产税租金会计分录
  • 生产成本和制造费用属于存货吗
  • 增值税谁来付
  • 在win7系统中将打开窗口拖到屏幕顶端
  • windows11如何删除账户
  • php发送电子邮件
  • qclean.exe - qclean是什么进程 有什么用
  • 如何用mac制作ppt
  • 引入人工智能
  • echarts3d地图
  • cookie验证和token验证的区别
  • php批量发送邮件
  • 竞业限制违反了怎么办
  • 应收债权与应付债务
  • 购买净资产为负的资产
  • 社保调整基数后 两个月没变化
  • 购买方收到的违约金计入
  • 待摊费用和预付账款的区别是什么
  • session跨域导致失效
  • 哈希表散列函数
  • 增值税发票没认证可以退回吗
  • html导航链接
  • 房屋扩建后折旧费怎么算
  • 长期借款期末余额表示什么
  • 资产负债表日后事项是指资产负债表日之后至审计报告
  • 新会计准则规定
  • 完税证明能作为抵扣凭证吗
  • 企业开外币户有什么用
  • 企业所得税固定资产的计税基础
  • 出口货物备案单证目录怎么填
  • 接受非货币性资产投资入账价值
  • 确认收入结转成本可以写在一张凭证上吗
  • 收取会费
  • 分公司向总公司申请拨款的请示
  • 发票已到货未到会计分录
  • 企业取得生产或制造某项财产物资时
  • 按照管理会计的解释,成本的相关性是
  • 什么是利润表?其作用有哪些?
  • 应收股利在资产负债表中怎么填
  • 软件折旧从什么时候算
  • 工程预缴税款的预征税额如何计算
  • 债权人接受债务怎么处理
  • 如何恢复ubuntu
  • win10提示激活windows
  • MAC OS X Yosemite开启深色模式的方法
  • WIN7系统安装
  • win10如何将我的电脑添加到桌面
  • unity血条slider
  • Extjs ajax同步请求时post方式参数发送方式
  • ubuntu列出用户
  • 深入理解中国式现代化
  • js展示
  • jquery事件处理有哪些
  • javascript中如何获取元素?
  • 铁路货运的费用有哪些
  • 沈阳新公司办理社保流程
  • 百旺税控盘怎么安装开票软件
  • 巾帼文明岗主题内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设