Vue3 Ajax(axios)

Vue 版本推荐使用 axios 来完成 ajax 请求。

安装方法

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用 npm:

$ npm install axios

 GET 方法

我们可以简单的读取 JSON 数据:

const app = {data() {return {info: 'Ajax 测试!!'}},mounted () {axios.get('https://www.runoob.com/try/ajax/json_demo.json').then(response => (this.info = response)).catch(function (error) { // 请求失败处理console.log(error);});}
}Vue.createApp(app).mount('#app')

 使用 response.data 读取 JSON 数据:

<div id="app"><h1>网站列表</h1><divv-for="site in info">{{ site.name }}</div>
</div>
<script type = "text/javascript">
const app = {data() {return {info: 'Ajax 测试!!'}},mounted () {axios.get('https://www.runoob.com/try/ajax/json_demo.json').then(response => (this.info = response.data.sites)).catch(function (error) { // 请求失败处理console.log(error);});}
}Vue.createApp(app).mount('#app')
</script>

GET 方法传递参数格式如下:

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 也可以通过 params 设置参数:
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

POST 方法

const app = {data() {return {info: null}},mounted () {axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php').then(response => (this.info = response)).catch(function (error) { // 请求失败处理console.log(error);});}
}Vue.createApp(app).mount('#app')

POST 方法传递参数格式如下:

axios.post('/user', {firstName: 'Fred',        // 参数 firstNamelastName: 'Flintstone'    // 参数 lastName}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

执行多个并发请求

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成}));

axios API

可以通过向 axios 传递相关配置来创建请求。

axios(config)
// 发送 POST 请求
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});
//  GET 请求远程图片
axios({method:'get',url:'http://bit.ly/2mTM3nY',responseType:'stream'
}).then(function(response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');

请求方法的别名

为方便使用,官方为所有支持的请求方法提供了别名,可以直接使用别名来发起请求:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

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

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

相关文章

蓝桥杯刷题 前缀和与差分-[2080]求和(C++)

题目描述 给定 n 个整数 a1, a2, , an &#xff0c;求它们两两相乘再相加的和&#xff0c;即 S a1 a2 a1 a3 a1 an a2 a3 an-2 an-1 an-2 an an-1 an 输入格式 输入的第一行包含一个整数 n 。 第二行包含 n 个整数 a1, a2, an。 输出格式 输…

langchain Chroma 构建本地向量数据库

langchain Chroma 构建本地向量数据库 # import from langchain_community.document_loaders import TextLoader from langchain_community.embeddings.sentence_transformer import (SentenceTransformerEmbeddings, ) from langchain_community.embeddings import HuggingFa…

SAP HCM 多成本中心薪酬过账标准程序解读

SAP HCM薪酬过账会涉及到CO对象&#xff0c;CO对象主要是成本中心、WBS、内部订单、订单等&#xff0c;成本中心有多个维护地方0001信息类型0027信息类型等&#xff0c;那么成本中心多个地方维护&#xff0c;优先级是如何&#xff0c;0027>1018>0001,也就是说人身上的优先…

【数据结构(一)】初识数据结构

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你学更多数据结构知识 目录 1.前言2.集合架构3.时间和空间复杂度3.1算法效率3.2时间复杂度3.2.1大O的渐进…

IP知识详解

IP基本认识 IP 在 TCP/IP 参考模型中处于第三层&#xff0c;也就是网络层。 网络层的主要作用是&#xff1a;实现主机与主机之间的通信&#xff0c;也叫点对点&#xff08;end to end&#xff09;通信。 网络层与数据链路层有什么关系呢&#xff1f; IP 的作用是主机之间通信…

Golang | Leetcode Golang题解之第10题正则表达式匹配

题目&#xff1a; 题解&#xff1a; func isMatch(s string, p string) bool {m, n : len(s), len(p)matches : func(i, j int) bool {if i 0 {return false}if p[j-1] . {return true}return s[i-1] p[j-1]}f : make([][]bool, m 1)for i : 0; i < len(f); i {f[i] m…

matlab中角度-弧度转化

在 MATLAB 中进行角度和弧度之间的转换可以使用内置的函数&#xff1a; 1. 将角度转换为弧度&#xff1a; matlab rad deg * pi / 180; 这里 deg 是你想要转换的角度值&#xff0c;pi 是 MATLAB 内置的圆周率常量。 2. 将弧度转换为角度&#xff1a; matlab…

33.Double checked locking

class Singleton {private Singleton(){}//懒汉式private volatile static Singleton singleton null;public static Singleton getInstance() {//这里使用了Double checked locking//只有第一次会进入同步代码块产生对象&#xff0c;后面就不会进入同步代码块&#xff0c;提升…

SQLite的架构(十一)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite下一代查询规划器(十&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 介绍 本文档介绍SQLite库的架构。 这里的信息对那些想要了解或 修改SQLite的内部工作原理。 接口SQL 命令处理器虚拟机B-树…

C++ //练习 11.14 扩展你在11.2.1节练习(第378页)中编写的孩子姓到名的map,添加一个pair的vector,保存孩子的名和生日。

C Primer&#xff08;第5版&#xff09; 练习 11.14 练习 11.14 扩展你在11.2.1节练习&#xff08;第378页&#xff09;中编写的孩子姓到名的map&#xff0c;添加一个pair的vector&#xff0c;保存孩子的名和生日。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#x…

Python云计算技术库之libcloud使用详解

概要 随着云计算技术的发展,越来越多的应用和服务迁移到了云端。然而,不同云服务商的API和接口千差万别,给开发者带来了不小的挑战。Python的libcloud库应运而生,它提供了一个统一的接口,让开发者可以轻松地管理不同云服务商的资源。本文将深入探讨libcloud库的特性、安装…

【二】Django小白三板斧

今日内容 静态文件配置 request对象方法初识 pycharm链接数据库&#xff08;MySQL&#xff09; django链接数据库&#xff08;MySQL&#xff09; Django ORM简介 利用ORM实现数据的增删查改 【一】Django小白三板斧 HttpResponse 返回字符串类型的数据 render 返回HTML文…

第20次修改了可删除可持久保存的前端html备忘录:重新布局

第20次修改了可删除可持久保存的前端html备忘录&#xff1a;重新布局 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

Linux云计算之Linux基础1——操作系统理论基础

目录 1、UNIX 的诞生和广泛使用 2、CPU 架构类型 3、CPU 指令 4、计算机程序设计和执行过程 5、操作统OS 6、编程层次 7、程序的内部运行接口 8、UI程序接口(人机交互接口) 9、程序的运行模式: 10、POSIX&#xff1a;可移植操作系统规范 11、计算机开源领域 12、Li…

文心一言 VS 讯飞星火 VS chatgpt (230)-- 算法导论17.1 1题

一、如果栈操作包括 MULTIPUSH 操作&#xff0c;它将 k 个数据项压入栈中&#xff0c;那么栈操作的摊还代价的界还是 O(1) 吗? 文心一言&#xff1a; 在栈的基本操作中&#xff0c;我们通常考虑的是单个元素的压入&#xff08;push&#xff09;和弹出&#xff08;pop&#x…

前端三剑客 —— CSS ( 坐标问题 、定位问题和图片居中 )

前期内容回顾&#xff1a; 1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的颜色 box-shadow border-radio 实现圆角 margin 内边距 padding 外边距 background 2.特殊样式 媒体查询&#xff1a;media 自定义字体&#xff1a;font-face { font-family:自定义名称&#…

TypeScript:泛型

TypeScript:泛型 一、单个泛型二、多个泛型:泛型可以同时指定多三、接口加泛型 在定义函数或者类型时&#xff0c;如果类型不确定就可以使用 泛型。 一、单个泛型 //T 表示任意类型,具体只有在函数执行时才可以确定。 function fn<T>(a:T):T{return T; }// 可以直接调用…

欧拉角及其旋转矩阵,旋转顺序与内旋/外旋及其代码

目录 欧拉角介绍 旋转矩阵公式推导 旋转顺序 内旋/外旋 欧拉角介绍 欧拉角&#xff1a; 横滚&#xff1a;roll&#xff08;绕X轴旋转&#xff09;&#xff1b; 俯仰&#xff1a;pitch&#xff08;绕Y轴旋转&#xff09;&#xff1b; 偏航&#xff08;也称航向角&#x…

小组分享内容第一部分:总览+HttpClients

目录 1.网络爬虫的作用&#xff08;人话&#xff09;&#xff1a; 2.使用的工具 3.不使用程序进行网页信息的获取的操作步骤 4.如何使用程序来进行上述操作 1.打开浏览器 2.输入网址 3.发送请求 4.获取响应 5.判断响应是否成功 6.获取响应里需要的内容 7.记得最后关…

深度学习模型--注意力机制(Attention Mechanism)

AI大模型学习 方向一&#xff1a;AI大模型学习的理论基础 提示&#xff1a;探讨AI大模型学习的数学基础、算法原理以及模型架构设计等。可以深入分析各种经典的深度学习模型&#xff0c;如卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#xff09;以…