VUE3 使用axios网络请求

news2025/6/16 11:49:22

1.新建工程

参考,VUE3 环境搭建:https://blog.csdn.net/LQ_001/article/details/136293795,运行命令 vue create vue-demo

2.引入axios

不管何种引用,都要在工程中安装 axios 包。安装命令:npm install --save axios

2.1 组件引用

直接看代码,代码有注释:

<template>
  <div class="hello"></div>
</template>

<script>
import axios from "axios"  // 组间引用 axios
import querystring from "querystring"  // POST方式,,需要安装 npm install --save querystring

export default {
  name: 'HelloWorld',
  mounted(){

    // get请求方式
    axios({
        method:"get",  // 1. 使用get的请求方式
        url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"  // 2. 输入请求网址
    }).then(res =>{
        // 3.控制台输出请求结果
        console.log(res.data);
    })

    // post 请求方式
    axios({
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({  // 此处使用 querystring
            user_id:"iwen@qq.com",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res => {
        console.log(res.data)
    })

    // 快捷get方案
    axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
        console.log(res.data);
    })

	// 快捷POST方案
    axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
      user_id:"iwen@qq.com",
      password:"iwen123",
      verification_code:"crfvw"
    })).then(res => {
        console.log(res.data)
    })
  }
}

</script>
<style scoped>
</style>

结果如下图,四种方式均请求到数据。

2.2 全局引用

全局引用更加简单。首先,src\main.js文件中,axios挂载到全局。

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios'

const app = createApp(App)

// 将axios挂载到全局
app.config.globalProperties.$axios=axios
app.mount('#app')

其次,在布局文件里面去掉 import axios from "axios" ,将所有axios函数名替换为this.$axios。修改后的代码如下:

<template>
  <div class="hello"></div>
</template>

<script>
import querystring from "querystring"  // POST方式,,需要安装 npm install --save querystring

export default {
  name: 'HelloWorld',
  mounted(){

    // get请求方式
    this.$axios({  // 使用了全局挂载方式
        method:"get",
        url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res =>{
        // 3.控制台输出请求结果
        console.log(res.data);

    })

    // post 请求方式
    this.$axios({  // 使用了全局挂载方式
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({  // 此处使用 querystring
            user_id:"iwen@qq.com",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res => {
        // 注意这次接收的是对象类型数据,要将其转化为字符串类型
        // 转化需要安装 npm install --save querystring
        console.log(res.data)
    })


    // 快捷get方案
    this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
        console.log(res.data);
    })
	
	// 快捷POST方案
    this.$axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
      user_id:"iwen@qq.com",
      password:"iwen123",
      verification_code:"crfvw"
    })).then(res => {  // 转化需要安装 npm install --save querystring
        console.log(res.data)
    })
  }
}
</script>

<style scoped>

</style>

结果如下图,四种方式均同样请求到数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1503904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于springboot实现数据资产管理系统 项目【项目源码+论文说明】

基于springboot实现数据资产管理系统演示 摘要 固定资产管理系统主要是完成对系统用户管理、资产信息管理、资产变更管理、资产用途管理、资产类别管理和资产增减管理。因为利用本系统管理员可以直接录入信息&#xff0c;修改信息&#xff0c;删除信息&#xff0c;并且若在录入…

智能革新:2024年AI辅助研发的挑战、机遇与未来展望

引言 在进入2024年的门槛时&#xff0c;我们站在了一个科技飞速发展的新纪元&#xff0c;其中&#xff0c;人工智能&#xff08;AI&#xff09;的持续进步和应用扩展无疑是推动这一变革的强大动力。AI辅助研发&#xff0c;作为将人工智能技术应用于科研和产品开发过程的一种模…

C++内存管理篇

文章目录 1. C/C内存分布2. C中的内存管理方式3. operator new和operator delete函数4. new和delete的实现原理5. 定位new表达式(placement-new) 1. C/C内存分布 C语言中&#xff0c;为了方便管理内存空间&#xff0c;将内存分成了不同的区域&#xff0c;每个区域管理不同的数据…

未来已来!AI大模型引领科技革命

未来已来&#xff01;AI大模型正以惊人的速度引领着科技革命。随着科技的发展&#xff0c;人工智能在各个领域展现出了非凡的能力和潜力&#xff0c;大模型更是成为了科技领域的明星。从自然语言处理到图像识别&#xff0c;从智能推荐到语音识别&#xff0c;大模型的应用正在改…

计算机找不到api-ms-win-core-path-l1-1-0的5种解决方法

在计算机使用过程中&#xff0c;我们可能会遇到各种问题&#xff0c;其中之一就是找不到某些系统文件。最近&#xff0c;许多用户反映他们在使用电脑时遇到了“找不到api-ms-win-core-path-l1-1-0文件”的问题。这个问题通常出现在Windows操作系统中&#xff0c;可能会影响到一…

《vtk9 book》 官方web版 第3章 - 计算机图形基础 (3 / 6)

3.8 演员几何 我们已经看到了光照属性如何控制演员的外观&#xff0c;以及相机如何结合变换矩阵将演员投影到图像平面上。剩下的是定义演员的几何形状&#xff0c;以及如何将其定位在世界坐标系中。 建模 计算机图形学研究中的一个重要主题是建模或表示物体的几何形状。…

HarmonyOS ArkTS工程目录结构(Stage模型)

1. ArkTS工程目录结构&#xff08;Stage模型&#xff09; 官方文档&#xff08;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2&#xff09; 1.1. AppScope AppScope > app.json5&#xff1a;应用的全局配…

高级语言讲义2010计专(仅高级语言部分)

1.编写一程序&#xff0c;对输入的正整数&#xff0c;求他的约数和。 如&#xff1a;18的约数和为1236939 #include <stdio.h>int getsum(int n){int i,sum0;for(i1;i<n;i)if(n%i0)sumi;return sum; } int main(){int sum getsum(18);printf("%d",sum); …

【UE5】游戏框架GamePlay

项目资源文末百度网盘自取 游戏框架 游戏 由 游戏模式(GameMode) 和 游戏状态(GameState) 所组成 加入游戏的 人类玩家 与 玩家控制器(PlayerController) 相关联 玩家控制器允许玩家在游戏中拥有 HUD&#xff0c;这样他们就能在关卡中拥有物理代表 玩家控制器还向玩家提供 …

XSS靶场-DOM型初级关卡

一、环境 XSS靶场 二、闯关 1、第一关 先看源码 使用DOM型&#xff0c;获取h2标签&#xff0c;使用innerHTML将内容插入到h2中 我们直接插入<script>标签试一下 明显插入到h2标签中了&#xff0c;为什么不显示呢&#xff1f;看一下官方文档 尽管插入进去了&#xff0…

腾讯云轻量服务器流量用完了怎么办?停机吗?

腾讯云轻量服务器流量用完了怎么办&#xff1f;超额流量另外支付流量费&#xff0c;流量价格为0.8元/GB&#xff0c;会自动扣你的腾讯云余额&#xff0c;如果你的腾讯云账号余额不足&#xff0c;那么你的轻量应用服务器会面临停机&#xff0c;停机后外网无法访问&#xff0c;继…

Spring Boot单元测试与热部署简析

1 Spring Boot的简介 Spring Boot是一个用于构建独立的、生产级别的Spring应用程序的框架。它简化了Spring应用程序的开发过程&#xff0c;提供了自动配置和默认配置&#xff0c;使得开发者只需专注于业务逻辑的实现&#xff0c;而不用去关注繁琐的配置问题。 Spring …

【MATLAB】MATLAB转C/C++语言并部署到VS2019

首先将你要转换的代码保存 function [outputArg1, outputArg2] test(inputArg1,inputArg2)print(inputArg1inputArg2)outputArg1double(inputArg1inputArg2);outputArg2double(inputArg1*inputArg2); end在APP中找到MATLAB Coder 选择保存的文件 C/C中需要给变量定义类型&…

江科大stm32学习笔记——【5-1】EXIT外部中断

1.中断系统 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后返回原来被暂停的位置继续运行。 外部中断&#xff1a;…

推理判断-聂佳-判读4-定义判断

知识点讲解 考点1 快速识别有效信息 考点2 同构选项排除 题目 考点1 快速识别有效信息 考点2 同构选项排除 总结

ubuntu debian apt deb debootstrap根文件系统制作 利用国内源加速 清华源

参考项目 https://github.com/Kron4ek/Wine-Builds/blob/master/create_ubuntu_bootstraps.sh 制作一个最小的deb 根文件系统 sudo apt install debootstrap debootstrap --arch amd64 jammy ~/tmp/ubuntu-jammy-bootstrap https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ 命…

【kubernetes】关于k8s集群中的ingress规则案例

目录 一、k8s 对外服务之 Ingress 1.1什么是ingress 1.2外部的应用能够访问集群内的服务有哪些方案&#xff1f; 1.3Ingress 组成 1.4Ingress-Nginx 工作原理 1.5ingress 暴露服务的方式 二、实操ingress暴露服务 前期.部署 nginx-ingress-controller 2.1基于host网络…

Hi3516DV500+SC2210 AIISP 黑光相机

1. Hi3516DV500 Hi3516DV500是一颗面向行业市场推出的高清智能网络摄像头SoC。该芯片最高支持2路sensor输入&#xff0c;支持最高5M30fps的ISP图像处理能力&#xff0c;支持2F WDR、多级降噪、六轴防抖、多光谱融合等多种传统图像增强和处理算法&#xff0c;支持通过AI算法对输…

实施工程师的项目流程

实施工程师负责项目的执行和实施&#xff0c;他的项目流程&#xff1a; 1. 项目准备阶段&#xff1a; - 确认项目需求和目标。 - 制定项目计划和工作范围。 - 分配资源和制定预算。 - 确定项目团队成员和角色。 2. 设计和准备阶段&#xff1a; - 分析和评估项…

187基于matlab的弹道目标跟踪滤波方法

基于matlab的弹道目标跟踪滤波方法&#xff0c;扩展卡尔曼滤波&#xff08;extended Kalman filter, EKF&#xff09;、转换测量卡尔曼滤波&#xff08;conversion measurement Kalman filter, CMKF&#xff09;跟踪滤波&#xff0c;得到距离、方位角、俯仰角误差结果。程序已调…