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

  • 华为儿童手表怎么连接wifi(华为儿童手表怎么添加联系人)

    华为儿童手表怎么连接wifi(华为儿童手表怎么添加联系人)

  • 苹果手机那个小圆圈怎么弄出来(苹果手机那个小圆点怎么设置)

    苹果手机那个小圆圈怎么弄出来(苹果手机那个小圆点怎么设置)

  • 支付宝健康码可以删除吗(支付宝健康码可以用吗)

    支付宝健康码可以删除吗(支付宝健康码可以用吗)

  • 红米k30pro标准版和变焦版的区别(红米k30pro标准版和变焦版)

    红米k30pro标准版和变焦版的区别(红米k30pro标准版和变焦版)

  • vivox50是双卡双待的吗(vivo双卡双待吗)

    vivox50是双卡双待的吗(vivo双卡双待吗)

  • 小米mix3传送门怎么使用(miui的传送门到底是做什么用)

    小米mix3传送门怎么使用(miui的传送门到底是做什么用)

  • 苹果看抖音直播怎么关弹幕(苹果看抖音直播卡怎么回事)

    苹果看抖音直播怎么关弹幕(苹果看抖音直播卡怎么回事)

  • 快手名总是已经注册怎么办(快手名字老是重复怎么办)

    快手名总是已经注册怎么办(快手名字老是重复怎么办)

  • pro+和pro的区别(华为mate40pro+和pro的区别)

    pro+和pro的区别(华为mate40pro+和pro的区别)

  • 未接电话删了怎么恢复(未接电话删除了怎么办)

    未接电话删了怎么恢复(未接电话删除了怎么办)

  • 手机优酷视频无法播放(手机优酷视频无法投屏)

    手机优酷视频无法播放(手机优酷视频无法投屏)

  • 苹果11手机亮度自动调节怎么关(苹果11手机亮度突然变暗)

    苹果11手机亮度自动调节怎么关(苹果11手机亮度突然变暗)

  • iphone自动旋转在哪设置(iphone自动旋转在哪关闭)

    iphone自动旋转在哪设置(iphone自动旋转在哪关闭)

  • 微信图片不能放大(微信图片不能放到桌面)

    微信图片不能放大(微信图片不能放到桌面)

  • 手机关机微信运动显示么(手机关机微信运动会显示0吗)

    手机关机微信运动显示么(手机关机微信运动会显示0吗)

  • mate30pro5g和4g区别(mate30pro4g与5g)

    mate30pro5g和4g区别(mate30pro4g与5g)

  • ipad哪款支持无线充电(ipad支持无线)

    ipad哪款支持无线充电(ipad支持无线)

  • 运算器的作用是(运算器的作用是什么)

    运算器的作用是(运算器的作用是什么)

  • 抖音主播可以设置几个管理员(抖音主播可以设置超管吗)

    抖音主播可以设置几个管理员(抖音主播可以设置超管吗)

  • 为什么快手直播总是闪退(为什么快手直播伴侣投屏不了??)

    为什么快手直播总是闪退(为什么快手直播伴侣投屏不了??)

  • 手机新浪微博怎么改名(手机新浪微博怎么进博客)

    手机新浪微博怎么改名(手机新浪微博怎么进博客)

  • qq点赞为什么会消失(qq点赞为什么会自动消失)

    qq点赞为什么会消失(qq点赞为什么会自动消失)

  • 红米k20dc调光在哪(红米k20prodc调光)

    红米k20dc调光在哪(红米k20prodc调光)

  • 手机上网慢怎么解决(手机上网慢怎么调)

    手机上网慢怎么解决(手机上网慢怎么调)

  • 微信小程序商城怎么开发(微信小程序商城源码)

    微信小程序商城怎么开发(微信小程序商城源码)

  • 给对方打电话响一声就说在通话中(给对方打电话响两声就说在通话中)

    给对方打电话响一声就说在通话中(给对方打电话响两声就说在通话中)

  • Vue2 Element description组件 列合并

    Vue2 Element description组件 列合并

  • 【GPT4】GPT4 官方报告解读(.gp4)

    【GPT4】GPT4 官方报告解读(.gp4)

  • 税控盘的功能特点是
  • 个税专项附加继续教育
  • 退票凭证什么样子
  • 在途物资什么科目
  • 无形资产开发阶段计入什么科目
  • 灭火器属于什么经营范围
  • 预付账款怎么处理
  • 外商企业增资
  • 劳务派遣公司代发工资需要开票吗
  • 部分红冲的发票无法勾选怎么办
  • 结转库存商品会计分录
  • 增值税没有按时缴纳会影响开票吗
  • 税务局查账征收转为核定征收之程序
  • 所得税计税方法
  • 建筑业甲供工程税率
  • 六税两费包括哪三税
  • 个人垫付汽车修理怎么办
  • 跨年如何冲减预提费用?
  • 买手机5000预算
  • linux查看系统信息工具
  • itunes无法链接
  • 鸿蒙系统怎么切换回安卓
  • 2020最新win10密钥
  • 发现以前年度多交增值税怎么申报
  • win10 多屏协同
  • 什么是减值测试方法
  • 房地产土地使用税征收标准
  • thinkphp实现163、QQ邮箱收发邮件的方法
  • 坏账准备的相关账务处理
  • phpstudy安装配置
  • 房地产取得土地怎么做账
  • 小规模纳税人每月申报什么税
  • php 抓取别的网站的内容
  • 凭证摘要写错了已经结账
  • 软件开发企业如何核算成本
  • java中的常量是什么意思
  • python中列表的索引用法
  • 帝国cms到底好不好
  • 公司扣除保险费会计分录
  • 财务预算资产负债表如何编制
  • 用友会计科目增加二级
  • 营改增后材料价差调整
  • 个人所得税表格怎么做
  • 企业会计准则子公司
  • 教育培训业能享受补贴吗
  • 收到备用金会计分录
  • 无偿借贷什么意思
  • 在非企业合并形成的长期股权投资中
  • 外出经营必须办理外管证吗
  • 未开票确认收入账务处理
  • 收到银行承兑汇票后,如何取钱
  • 无形资产出售时累计摊销为什么在借方
  • 滞纳金冲留底税额怎么算
  • 退回的增值税税费怎么做会计记录
  • 开发阶段的支出计入什么科目
  • 替其他公司支付工资怎么做账
  • 个税专项扣除住房租金标准
  • 开票信息指的是买方还是卖方
  • 利润率百分百是什么意思
  • 商场水电费应该由谁承担
  • os x10.11el capitan公测版beta5更新了什么?os x10.11el capitan公测版beta5发布下载
  • win7使用率
  • windows xp windows
  • windows10新功能
  • w10系统音频怎么设置
  • 磁盘分区右键是灰色的
  • w8系统一键恢复
  • unity connected games
  • 基于像素的分类方法
  • python给定某数字a
  • 关于javascript中数组的说法不正确
  • shell 比较大小
  • 批处理文件是可执行文件吗
  • node.js怎么用
  • node-js
  • jquery Deferred 快速解决异步回调的问题
  • java script
  • 陕西省税务局发来信息通知
  • 网上预约挂号能退吗
  • 增值税按次纳税的规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设