vue入门到精通-Axios入门

最新推荐文章于 2023-12-18 20:33:41 发布
最新推荐文章于 2023-12-18 20:33:41 发布
阅读量360 收藏 1
点赞数
分类专栏： 大前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44480609/article/details/125509665
版权
本文介绍了Axios这个用于浏览器和Node.js的异步通信库，它支持Promise API、请求和响应拦截、数据转换等功能。通过实例展示了如何进行GET和POST请求，包括从本地JSON文件读取数据和获取远程天气信息。此外，还演示了Axios的简写形式，便于快速开发。
摘要由CSDN通过智能技术生成

1.简介

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异
步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [ JS中链式编程 ]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

2. 第一个Axios

新建json文件，模拟访问返回结果data.json

{
	"name": "张三",
	"url": "https://www.baidu.com",
	"page": 1,
	"address": {
		"street": "毛坦厂",
		"city": "六安",
		"country": "中国"
	}
}

测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Axios</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{info.name}}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                info: {
                    name: null,
                    url: null,
                    page: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            },
            mounted() {
                //钩子函数 
                axios
                    .get('data.json')
                    .then(response => (this.info = response.data));
            }
        }) 
    </script>
</body>

</html>

3.get请求

http://wthrcdn.etouch.cn/weather_mini?city=巢湖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })

        axios({
            method: "get",
            url: "http://wthrcdn.etouch.cn/weather_mini?city=巢湖"
        }).then(function (resp) {
            alert(JSON.stringify(resp.data));
            console.log(resp.data);
        })

    </script>
</body>

</html>

或者简写方式

    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=巢湖"
    ).then (function (resp) {
        alert(JSON.stringify(resp.data));
    })

4.post请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
            }
        })

        //2.post
        axios({
            method: "post",
            url: "https://api.apiopen.top/api/login",
            data: JSON.stringify({
                account: "1299828500@qq.com",
                password: "123456"
            })
        }).then(function (resp) {
            alert(JSON.stringify(resp.data));
        })


    </script>
</body>

</html>

简化写法

        axios.post("https://api.apiopen.top/api/login", JSON.stringify({
            account: "1299828500@qq.com",
            password: "123456"
        })
        ).then(function (resp) {
            alert(JSON.stringify(resp.data));
        })
信小呆666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决http://wthrcdn.etouch.cn/weather_mini?city=接口获取天气的返回字符串是乱码
Sugar_tea的专栏
04-23 3万+
最近在做一个类似天气预报的demo,数据是从http://wthrcdn.etouch.cn/weather_mini?city=获取，但是解析出来的字符串是乱码，通常更换编码类型就可以了，但是并不见效。所以最后才发现问题所在，这个接口的数据传给客户端的时候把数据压缩了，所以当我们在客户端获取到数据后要给他解压缩gzip即可，问题就解决了，现在把代码贴出来。 // 获取天气预报 public
前端新手的第一个axios登录
weixin_45410795的博客
05-16 553
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习..
Vue快速入门（下）
越努力越幸运的博客
10-06 1584
文章目录Vue快速入门（下）（应急用）八、使用Axios实现异步通信（重点）8.1 什么是Axios8.2 第一个Axios应用程序九、表单输入绑定十、组件基础 Vue快速入门（下）（应急用） 八、使用Axios实现异步通信（重点） 8.1 什么是Axios Axios是一个开源的可以用在浏览器端和Nodejs的异步通信框架，他的主要作用就是实现Ajax异步通信，其功能特点如下： 从浏览器中创建XMLHttpRequests 从node.js中创建http请求 支持Promise API 拦截请求和响应
vue基础-axios详解
热门推荐
weixin_40017062的博客
07-19 1万+
Axios是一个基于的 HTTP 库，可以用在浏览器和 node.js 中, 也是 vue 官方推荐使用的 http 库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。
关于Vue的简单学习
qq_52951579的博客
02-17 1614
目录 第一个Vue程序 v-if、v-else-is、v-else v-for v-on 使用Axios实现异步通信 第一个Axios应用程序 v-bind v-model 组件 计算属性 插槽与自定义事件 插槽 自定义事件 Vue-cli Webpack vue-router 整合ElementUI 登录案例 添加表单验证 嵌套路由 参数传递 路径匹配方式 props传参 组件重定向 去除路径中的 # 处理404 路由钩子函数和异步请求 vuex
vue从入门到精通.rar
03-30
本教程旨在帮助初学者快速掌握Vue的核心概念和实际应用，通过一系列源码实例，逐步从入门到精通。 1. **安装与基本使用** 首先，你需要了解如何在项目中安装Vue。Vue可以通过npm（Node Package Manager）进行全局...
vue入门到精通
11-10
### Vue.js 入门到精通：深入理解 Vuex #### 一、引言 在现代前端开发领域，Vue.js 已成为构建用户界面的一种流行选择。它以其轻量级且易于集成的特点，在众多框架中脱颖而出。随着项目的复杂度增加，状态管理变得...
30天从Vue入门到精通教程
08-10
【30天从Vue入门到精通教程】 本教程将带你逐步深入Vue的世界，通过30天的学习，你将从基础到进阶全面掌握Vue.js。这个过程分为多个阶段，从安装Vue开始，然后逐步了解其基本概念和语法，直到能够构建完整的项目。 ...
vue从入门到精通
06-16
本课程“Vue从入门到精通”专注于帮助0-5年开发经验的工程师提升技能，通过一线互联网大咖的亲自授课，将10年以上开发经验和多年在线教育经验融合，提供高质量的教学内容。 首先，从基础开始，学习Vue.js的基本概念...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Axios则是一个常用的第三方库，用于在Vue中发起HTTP请求，与后端服务器进行数据交互。Vuex是Vue的状态管理库，用于集中管理组件间的共享状态，解决复杂应用中的数据同步问题。 Vue实战项目通常会结合Element UI这样...
天气API
cfysch的博客
11-10 463
http://wthrcdn.etouch.cn/WeatherApi?citykey=101010100 通过城市id获得天气数据，xml文件数据, 当错误时会有节点 http://wthrcdn.etouch.cn/WeatherApi?city=北京 通过城市名字获得天气数据，xml文件数据
Axios使用
Daylight629博客
02-27 380
Axios使用 一、什么是Axios Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下： 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API[JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF(跨站请求伪造) GitHub：https://github.com/axios/axios 中文文档：http://ww
vue网络应用：天气查询
阿闷的博客
10-24 824
通过vue网络应用建立的天气查询网页 功能： 1.点击查询城市天气 2.按键输入查询天气 3.默认城市天气查询 4.查询失败返回 5.界面隐藏 技术应用： 1.html5，css3布局：采用流失布局为主，flex布局为辅。 2.vue本地应用于网络应用。 3.axios接口。 4.网络应用接口。 5.git工具部署静态网页。 技术逻辑： 1.回车查询：输入内容按下回车，通过双向绑定和enter绑定按键事件，调用接口，将输入的内容传递到服务器，接受到服务器返回的内容之后，渲染成列表界面。 2.点击查询：绑定点
axios（初始用）
不是死水
08-05 308
1.axios基本使用 先安装npm install axios --save，引入axios后 import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, ren
【Vue】Axios异步通信
weixin_44421143的博客
12-27 252
文章目录十、Axios异步通信10.1 什么是Axios10.2 为什么要使用Axios10.3 第一个Axios应用程序 十、Axios异步通信 10.1 什么是Axios ​ Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下： 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API [JS中链式编程] 拦截请求和相应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端
3分钟让你学会axios在vue项目中的基本用法（建议收藏）
m0_64590669的博客
12-18 3230
3分钟让你学会axios在vue项目中的基本用法
免费的天气接口
xiaowu_1997的博客
12-18 4866
项目中有需要抓取当地天气的需求，在网上找了很多的接口,要么是接口请求次数有限制,要么是数据不全,要么是接口失效，总之是无法很好的提供一个稳定的接口。为此很是头疼的一段时间，然后天不绝人，最终还是在网上找到些比较好用的接口，特此记录下来，方便你我他。 1.通过城市名（北京/北京市）获取当前城市当前温度及未来一周天气预报 (Json数据) ：包含台湾的主要县市 接口：http://wthrcdn.et...
Vue3+Elementplus+Axios 入门教程详解
majingbobo的博客
10-29 3618
Vue3+Elementplus+Axios 入门教程
vue项目---axios使用教程及封装
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
02-23 2077
最近在写demo练手，记录一下自己在项目中对axios的使用，如有不恰当的地方欢迎指正；
vue2安装vue-axios
最新发布
01-24
安装vue-axios可以通过以下步骤完成： 1. 首先，确保你已经安装了Vue.js和axios。如果没有安装，可以使用以下命令进行安装： ```shell npm install vue axios ``` 2. 在你的Vue项目中，创建一个名为`request.js`的文件，用于封装axios请求。在该文件中，导入axios并创建一个axios实例，然后将其导出。示例代码如下： ```javascript // request.js import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000 // 设置请求超时时间 }) export default instance ``` 3. 在你的Vue组件中，导入刚刚创建的`request.js`文件，并在需要发送请求的方法中使用axios发送请求。示例代码如下： ```javascript // APP.vue <template> <div>{{ data }}</div> </template> <script> import request from '@/APi/request.js' export default { data() { return { data: "" }; }, methods: { async fetchData() { const res = await request.get('/tabbar') // 发送GET请求 this.data = res.data } }, created() { this.fetchData() } }; </script> ``` 通过以上步骤，你就成功安装了vue-axios，并在Vue组件中使用axios发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值