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

  • word的表格工具在哪儿(word的表格工具布局在哪里)

    word的表格工具在哪儿(word的表格工具布局在哪里)

  • qq智能降噪怎么关(qq智能降噪怎么开)

    qq智能降噪怎么关(qq智能降噪怎么开)

  • 12306怎么改签高铁票(12306怎么改签高铁票怎么改签不了)

    12306怎么改签高铁票(12306怎么改签高铁票怎么改签不了)

  • 拼多多如何注销实名认证(拼多多如何注销店铺重新开)

    拼多多如何注销实名认证(拼多多如何注销店铺重新开)

  • 微信拉黑后对方发信息会显示什么(微信拉黑后对方发好友申请能收到吗)

    微信拉黑后对方发信息会显示什么(微信拉黑后对方发好友申请能收到吗)

  • 抖音如何开小号(抖音如何开小号直播)

    抖音如何开小号(抖音如何开小号直播)

  • 滴滴打车记录如何查询(滴滴打车记录如何永久删除)

    滴滴打车记录如何查询(滴滴打车记录如何永久删除)

  • 华为p40是单挖孔吗(华为p40pro挖孔屏有什么功能)

    华为p40是单挖孔吗(华为p40pro挖孔屏有什么功能)

  • 魔力相册制作音乐相册能保存到相册吗(魔力相册制作音乐相册怎么导出)

    魔力相册制作音乐相册能保存到相册吗(魔力相册制作音乐相册怎么导出)

  • app更新只显示打开(app需要更新却是打开)

    app更新只显示打开(app需要更新却是打开)

  • 怎样取消待付款订单(怎样取消待付款订单微信)

    怎样取消待付款订单(怎样取消待付款订单微信)

  • 苹果11控制中心怎么设置从下面划出来(苹果11控制中心拉不出来怎么办)

    苹果11控制中心怎么设置从下面划出来(苹果11控制中心拉不出来怎么办)

  • poe路由器什么意思(poe路由器到底好不好)

    poe路由器什么意思(poe路由器到底好不好)

  • 小米应用商店wifi不能联网(小米应用商店wifi下载慢)

    小米应用商店wifi不能联网(小米应用商店wifi下载慢)

  • iphone8p是a11吗(苹果8p是a12处理器吗)

    iphone8p是a11吗(苹果8p是a12处理器吗)

  • 苹果ipad最大的屏幕是多大尺寸(苹果ipad最大的屏幕是多大)

    苹果ipad最大的屏幕是多大尺寸(苹果ipad最大的屏幕是多大)

  • 怎么让苹果6信号变强(怎么让苹果信任企业软件)

    怎么让苹果6信号变强(怎么让苹果信任企业软件)

  • cnc表示什么键(cnc操作按键图标解说)

    cnc表示什么键(cnc操作按键图标解说)

  • 苹果手机骚扰电话怎么拦截怎么查看(苹果手机骚扰电话怎么设置打不进来)

    苹果手机骚扰电话怎么拦截怎么查看(苹果手机骚扰电话怎么设置打不进来)

  • ios13怎么不能设置铃声(ios13不能设置简单密码)

    ios13怎么不能设置铃声(ios13不能设置简单密码)

  • 抖音怎么关礼物特效(抖音怎么关礼物功能)

    抖音怎么关礼物特效(抖音怎么关礼物功能)

  • 快剪辑怎么剪辑图片(快剪辑怎么剪辑音乐mp3)

    快剪辑怎么剪辑图片(快剪辑怎么剪辑音乐mp3)

  • 关闭qq你可能感兴趣(怎么关闭qq你可能感兴趣)

    关闭qq你可能感兴趣(怎么关闭qq你可能感兴趣)

  • vivox27怎样设置面部识别(vivox27怎样设置手势解锁)

    vivox27怎样设置面部识别(vivox27怎样设置手势解锁)

  • 银边翠的养殖方法(银边翠的栽培历史)

    银边翠的养殖方法(银边翠的栽培历史)

  • 如何完美地去除表格的“双线”(如何简单去除)

    如何完美地去除表格的“双线”(如何简单去除)

  • 减免所得税如何申报
  • 饮食企业简介
  • 收到失业金返还什么意思
  • 饭店开业几年后可以申请升级
  • 个人所得税累计扣除标准
  • 会计工资标准
  • 个体户一季度不超过30
  • 增值税申报表与财务报表不一致
  • 金税盘没有及时清卡怎么办
  • 收到代发工资的信息
  • 合同每三个月付一次款
  • 非营利组织管理规定
  • 补发工资如何计提
  • 卖二手车
  • 代扣代缴的车船税现金流量怎样分配
  • 开公司财务流程
  • 计提摊销房租会计分录
  • 结转已完工产品会计分录
  • 租车没有发票怎么入账
  • 年会的奖金入什么科目
  • 多缴的增值税能退吗
  • 增值税申报金额含税吗
  • 无票收入增值税申报表怎么填小规模纳税人
  • 发票过期作废不了怎么办
  • 小企业销售费用包括
  • 赠品怎么做账务分录
  • 小规模季度不超过30万的账务处理
  • 库存商品赠送会计分录
  • autorun.exe无法运行
  • vue3中使用require
  • linux多网卡聚合
  • vue antdesign
  • 汇兑应计入哪个科目
  • joomla中文手册
  • php实现页面浏览量
  • php编辑器哪个好
  • php怎么读取txt
  • 如何判断自己风寒还是风热
  • 哈士奇新手礼包
  • 27岁零基础转行做网络工程师
  • web前端三大主流框架vue
  • 三维点云识别
  • 大前端技术架构
  • 预缴税款计入什么科目
  • 代发工资的账务处理需要什么资料
  • mysql日志文件在哪里
  • 税控系统如何清卡
  • 注销小规模财务报表怎么办
  • sql server附加数据库出错
  • 企业税预缴在哪里
  • 拿工资要开发票,发票去哪儿开?
  • 水利建设基金计提会计分录
  • 关于事业支出期末的结转
  • 企业储蓄存款如何做账
  • 工地零电零水布置图
  • 附加税的计税依据是增值税实际缴纳税款吗
  • 代理记账服务业务内容
  • 收房租的收据怎么写
  • 预计产品质量保证损失计入什么
  • 工资及福利费科目
  • 单位买另一单位的保险
  • 组织机构代码证和统一社会信用代码的关系
  • 销售免税货物的会计分录
  • Mysql 5.7.9 shutdown 语法实例详解
  • mysql设置唯一值
  • solaris init
  • centos6.10安装
  • win7玩csgo掉帧怎么办
  • script在html中的用法
  • html5图文混排
  • JavaScript 和 Java 的区别浅析
  • 刨根问底造句
  • JS Timing
  • 用python写脚本
  • android手机屏幕采集触摸区域所有点
  • 如何在电子税务局申报社保
  • 运输发票抵税多少个点
  • 残保金申报表填写
  • 外资企业怎样
  • 金融机构取得的利息收入应缴纳增值税的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设