Vue.js------网络请求库axios(四)

桃扇骨 2021-09-23 15:30 476阅读 0赞

# 一、引入axios资源库 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]

# 二、事例代码 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>axios 网络请求库</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		
    		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<input type="button" value="获取笑话" @click="getjoke" />
    			<p> { { joke}}</p>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: "#app",
    				data: { 
    					joke: "这是一条笑话",
    				},
    				methods: { 
    					getjoke: function() { 
    						var that = this;
    						axios.get("https://autumnfish.cn/api/joke").then(function(response) { 
    							console.log(response.data);
    							that.joke = response.data;
    						}, function(err) { })
    					}
    				},
    			})
    		</script>
    	</body>
    </html>

# 三、总结 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]: /images/20210923/4cf9c71eb50d4ac791cffad14199ca83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]: /images/20210923/a00d1405f14844eab92ff5a38313f3f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python网络请求库使用：requests库请求示例

`requests` 是一个非常常用的 Python 网络请求库，它提供了简单易用的接口来发送 HTTP 请求。以下是一个简单的 `requests` 库请求示例： 1.

不念不忘少年蓝@/ 2024年12月20日 18:57/ 0 赞/ 131 阅读

相关 Axios网络请求

![Alt][]哈喽~大家好，这篇来看看Axios网络请求。 <table> <thead> <tr> <th>文章推荐</th> <th>链接<

Love The Way You Lie/ 2024年03月27日 11:20/ 0 赞/ 166 阅读

相关 Vue3后台管理系统（三）Axios网络请求库

目录一、安装Axios和js-cookie 二、axios工具封装三、API封装四、API调用 -------------------- 一、安装Axios

左手的ㄟ右手/ 2024年03月26日 12:00/ 0 赞/ 113 阅读

相关 HTTP 请求库Fetch vs Axios

在我们之前的文章[“如何使用 Axios 发出 HTTP 请求][Axios _ HTTP]”中，我们已经解释了如何使用 Axios 发送基本的 CRUD 请求。使用 Axio

我不是女神ヾ/ 2023年10月01日 18:59/ 0 赞/ 86 阅读

相关网络请求库axios使用详解-简单封装

文章目录 axios库 axios库的介绍 axios请求方式 axios基本使用 axios基本演练

迈不过友情╰/ 2023年09月28日 16:44/ 0 赞/ 84 阅读

相关 axios网络请求

> 人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。 > 你好，我是梦阳辰，期待与你相遇！文章目录 01.概述 02.axios请求方式

末蓝、/ 2023年01月10日 14:38/ 0 赞/ 300 阅读

相关 axios（网络请求模块）

axios：网络请求模块，是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。功能特点：从浏览器中创建 XMLHttpRequests

Dear 丶/ 2022年12月27日 04:43/ 0 赞/ 246 阅读

相关 HTTP 请求库 - Axios 源码分析

前言说到 JS HTTP 请求，就不得不提 Axios，作为前端网络请求库领域中的霸主，被广泛应用于众多的 web 项目中。 > 几款热门 HTTP 请求库在 Git

深碍√TFBOYSˉ_/ 2022年09月09日 11:57/ 0 赞/ 264 阅读

相关 Vue.js------网络请求库axios(四)

一、引入axios资源库 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> !

桃扇骨/ 2021年09月23日 15:30/ 0 赞/ 477 阅读

相关 axios网络请求

axios网络请求 1、安装 cnpm install axios -S 2、在main.js中引入 import

秒速五厘米/ 2021年07月24日 21:01/ 0 赞/ 795 阅读