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

  • 微信美颜功能怎么设置vivo(微信美颜功能怎么设置免费)

    微信美颜功能怎么设置vivo(微信美颜功能怎么设置免费)

  • 顺序存储和链式存储的区别(顺序存储和链式存储的定义)

    顺序存储和链式存储的区别(顺序存储和链式存储的定义)

  • iphonex的小圆点怎样设置(苹果x小圆点不起作用)

    iphonex的小圆点怎样设置(苹果x小圆点不起作用)

  • 丢失的手机登录微信以前的聊天记录还在吗(丢失的手机登录着微信怎么找)

    丢失的手机登录微信以前的聊天记录还在吗(丢失的手机登录着微信怎么找)

  • 麒麟820处理器什么水平(麒麟820处理器属于什么水平)

    麒麟820处理器什么水平(麒麟820处理器属于什么水平)

  • cad下面的命令栏隐藏了怎么办(cad下面的命令栏怎样调整大小)

    cad下面的命令栏隐藏了怎么办(cad下面的命令栏怎样调整大小)

  • qq怎么改年龄(qq怎么改年龄资料2021)

    qq怎么改年龄(qq怎么改年龄资料2021)

  • 苹果音乐下载的歌是永久的吗(苹果音乐下载的歌曲是什么格式)

    苹果音乐下载的歌是永久的吗(苹果音乐下载的歌曲是什么格式)

  • 抖音抖币怎么提现(抖音抖币怎么提现比例)

    抖音抖币怎么提现(抖音抖币怎么提现比例)

  • oppor9手机发热怎么解决方法(oppor9s手机发热)

    oppor9手机发热怎么解决方法(oppor9s手机发热)

  • 苹果11充电时发语音按不住(苹果11充电时发热)

    苹果11充电时发语音按不住(苹果11充电时发热)

  • oppo手机打字键盘不出来怎么办(oppo手机打字键盘声音怎么关闭)

    oppo手机打字键盘不出来怎么办(oppo手机打字键盘声音怎么关闭)

  • 微信朋友圈评论可以发图吗(微信朋友圈评论所有人都能看到吗)

    微信朋友圈评论可以发图吗(微信朋友圈评论所有人都能看到吗)

  • hdr和hdr10区别是什么(hdr与hdr10的区别)

    hdr和hdr10区别是什么(hdr与hdr10的区别)

  • wps怎么搜索(wps怎么搜索表格里面的内容)

    wps怎么搜索(wps怎么搜索表格里面的内容)

  • ios13亮度自动调整在哪(ios13亮度自动调整没有了)

    ios13亮度自动调整在哪(ios13亮度自动调整没有了)

  • 苹果x反向充电怎么打开(苹果x反向充电在哪里设置)

    苹果x反向充电怎么打开(苹果x反向充电在哪里设置)

  • vivox9怎么关闭低电量模式(vivox7手机怎么关闭低电量模式)

    vivox9怎么关闭低电量模式(vivox7手机怎么关闭低电量模式)

  • wps编号怎么自动生成(wps自动编号格式怎么设置)

    wps编号怎么自动生成(wps自动编号格式怎么设置)

  • 怎么将电话号码拉黑(怎么将电话号码导入sim卡)

    怎么将电话号码拉黑(怎么将电话号码导入sim卡)

  • 闲鱼买到假货可以退款吗(闲鱼买到假货可以要求卖家出运费吗)

    闲鱼买到假货可以退款吗(闲鱼买到假货可以要求卖家出运费吗)

  • 图虫怎么保存作品到手机(图虫如何)

    图虫怎么保存作品到手机(图虫如何)

  • 个体工商户怎么注销
  • 什么是试算平衡?如何进行试算平衡
  • 物业费的税金是否向业主收取
  • 减免所得税优惠明细表怎么填
  • 苗木种植发票免增值税吗
  • 企业所得税纳税人包括哪些类型
  • 房地产企业预收账款结转收入
  • 应收账款平均占用资金的变动额
  • 非居民企业转让财产所得税
  • 房地产企业交纳所得税吗
  • 年底预收货款如何入账
  • 中期票据怎么入账
  • 房屋租赁费属于什么会计分录
  • 申报财产租赁合同印花税是在什么情况下?
  • 企业法人投资股4 账户
  • 公会经费开具的法律依据
  • 营改增后企业所得税不能跨年
  • 企业所得税报表模板
  • 开票时税收编码必须和进项一致吗
  • 个体户开票要交印花税?
  • 增值纳税人类别怎么选
  • 物业维修收费合理吗
  • 资本公积金转增资本属于所有者权益吗
  • win11进入黑屏
  • 可以用鸿蒙系统的手机
  • 如何输入特殊符号带圈数字11
  • php session_start
  • linux特殊权限设置
  • wordpress用什么开发的
  • 租入固定资产改建支出何时开始摊销
  • st的电机库性能怎么样呢
  • 科目余额表和资产负债表的金额不一致的原因
  • get_module_base
  • 不发工资可以交五险一金吗
  • 固定资产报废会计科目处理
  • 增值税专用发票有几联?
  • 代建工程开发成本核算应设置的会计科目是( )
  • 如何区分误餐费和补助费
  • 二分查找和折半查找一样吗
  • c语言中exit函数怎么用
  • 教育经费什么情况下可以报销
  • 高新补助收入属于不征税收入吗
  • 小规模企业免税收入会计分录
  • 失业保险金领取多少钱
  • 小型微利企业是小微企业吗
  • 买的加油卡怎么充值
  • 公司年度汇算清缴费用多少
  • 固定资产未转固属于什么问题
  • 进口ddp税款如何缴纳
  • 银行贷款需要哪些材料
  • 净资产增加是好还是坏
  • 个人所得税计算方法2023计算器
  • 员工报销的话费要缴纳个税吗?
  • 企业购买原材料属于什么活动
  • 工程分包总包产生的 税费由谁承担
  • 企业取得的土地使用权用于自行开发建造厂房
  • 月报报表格式
  • 个人如何进行股票交易
  • 行政单位经费支出审批权限
  • c# mysql实例
  • linux使用范围
  • Linux VPS中rar、unrar命令安装和使用详解
  • win7系统开机黑屏只有鼠标且打不开任务管理器
  • 使用linux的电脑
  • cocos2dx怎么用啊
  • unity 移动应用开发
  • 编辑器组件
  • anaconda使用指南
  • Xcode6 和 Cocos2dx3.1以下版本的不兼容问题
  • OSG 砖块 shader 例子 GLSL
  • 用js自定义函数生成表格
  • jquery中什么方法用于模拟光标悬停事件
  • jQuery.ajax实现根据不同的Content-Type做出不同的响应
  • 利用python进行
  • unity2018.4破解
  • 河北发票查询真伪查询
  • 上海中考规定
  • 个人经营所得申报时间
  • 什么是美国注册商标
  • 宁波购房契税退税条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设