【Vue】Axios 网络请求库

【Vue】Axios 网络请求库

文章目录

​​Axios 网络请求库​​

​​一、Axios 简介​​​​二、Axios 下载安装​​​​三、Axios 基本使用​​

​​1、Aios 的请求方式​​

​​Get 请求​​​​Post 请求​​

​​四、Axios & Vue​​

​​案例：获取笑话​​

​​五、网络应用案例​​

​​1、分析步骤​​​​2、html​​​​3、main.js​​​​4、效果展示​​​​5、关键步骤解析​​

​​5.1 城市参数值​​​​5.2 城市天气数据​​​​5.3 数据展示​​​​5.4 热门城市查询​​

Axios 网络请求库

一、Axios 简介

说到​​axios​​我们就不得不说下​​Ajax​​。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)

异步网络请求，​​Ajax​​能够让页面无刷新的请求数据。实现ajax的方式有多种，如​​jQuery封装的ajax​​，​​原生的XMLHttpRequest​​，以及​​axios​​。但各种方式都有利弊：

原生的​​XMLHttpRequest​​的配置和调用方式都很繁琐，实现异步请求十分麻烦​​jQuery​​的​​ajax​​相对于​​原生的ajax​​是非常好用的，但是没有必要因为要用​​ajax​​异步网络请求而引用​​jQuery​​框架

Axios（ajax i/o system）

这不是一种新技术，本质上还是对原生​​XMLHttpRequest​​的封装，可用于​​浏览器​​和​​nodejs​​的​​HTTP​​客户端，只不过它是基于​​Promise​​的，符合最新的​​ES规范​​。具备以下特点：

在浏览器中创建​​XMLHttpRequest​​请求在​​node.js​​中发送​​API​​拦截请求和响应转换请求和响应数据取消要求自动转换​​JSON​​数据客户端支持防止​​CSRF/XSRF​​(跨域请求伪造)

​​返回顶部​​

二、Axios 下载安装

特别注意：关于回调函数中的 this 对象中间存储的问题！

​​axios​​回调函数中的this已经改变,无法访问到​​data​​中数据把​​this​​保存起来,回调函数中直接使用​​保存的this​​即可和本地应用的最大区别就是改变了数据来源

​​返回顶部​​

五、网络应用案例

1、分析步骤

应用的逻辑代码建议和页面分离，使用单独的​​js文件​​编写​​axios​​回调函数中​​this​​指向改变了，需要额外的保存一份服务器返回的数据比较复杂时，获取的时候需要注意层级结构自定义参数可以让代码的复用性更高​​methods​​中定义的方法内部，可以通过​​this​​关键字点出其他的方法

​​返回顶部​​

2、html

​​返回顶部​​

3、main.js

​​返回顶部​​

4、效果展示

​​返回顶部​​

5、关键步骤解析

5.1 城市参数值

其实通过上面的几个案例，我们不难发现利用 ​​axios​​、​​vue​​ 实现请求，主要还是​​参数的传递及其方式​​。所以无论是​​输入框查询​​，还是​​热门城市快捷查询​​，最主要的还是参数城市的值传递。

我们通过 ​​v-model='city'​​ 双向绑定 ​​city​​ 数据，不管是 ​​@keyup.enter="searchWeather"​​ 还是 ​​@click="changeCity('城市名')"​​ 都会实现动态更新。

​​返回顶部​​

5.2 城市天气数据

通过对城市请求的数据结构分析，前期真正数据被封装在 ​​response.data.data.forecast​​ 中，并且是一个长度为 ​​5​​ 的 ​​Array​​，表示 ​​5天的天气信息​​，所以我们最终应当获取到 ​​forecast​​ 下的数据进行存储，后面用于界面的展示。

axios.get('+ this.city) .then(function(response) { // console.log(response); // 根据response结构获取天气信息 console.log(response); // 获取真正的天气数据集 that.weatherList = response.data.data.forecast; }) .catch(function(err) {})

​​返回顶部​​

5.3 数据展示

根据上面分析的天气数据结构，我们通过 ​​v-for="item in weatherList"​​ 循环展示 5 天的部分数据信息，对应的数据信息通过 ​​item.属性​​ 的方式获取。

• {{ item.type }}
  {{ item.low }} ~ {{ item.high }}
  {{ item.date }}

​​返回顶部​​

5.4 热门城市查询

对比热门城市快捷查询和回车查询，我们可以发现其本质是 ​​v-on:事件​​ 的含参问题，​​searchWeather​​直接内部通过​​this对象​​的存储对​​city​​进行了修改然后进行请求查询；​​changeCity​​由于是快捷查询，已经存在城市信息并且数量较少，所以直接通过含参的形式进行查询。由于查询的逻辑都是通过请求，所以只需要重设一下​​city​​值，再调用 ​​searchWeather​​ 函数即可。

​​返回顶部​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。