0
点赞
收藏
分享

微信扫一扫

【Vue】Axios 网络请求库

我是芄兰 2022-08-12 阅读 48
vueaxiosios数据html云平台云计算



文章目录

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

【Vue】Axios 网络请求库_ios

Ajax(Asynchronous JavaScript and XML)

  • 异步网络请求，​​Ajax​​能够让页面无刷新的请求数据。
  • 实现ajax的方式有多种，如​​jQuery封装的ajax​​，​​原生的XMLHttpRequest​​，以及​​axios​​。
  • 但各种方式都有利弊：
  • 原生的​​XMLHttpRequest​​的配置和调用方式都很繁琐，实现异步请求十分麻烦
  • ​​jQuery​​的​​ajax​​相对于​​原生的ajax​​是非常好用的，但是没有必要因为要用​​ajax​​异步网络请求而引用​​jQuery​​框架

【Vue】Axios 网络请求库_axios_02

Axios（ajax i/o system）

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

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

​​返回顶部​​

二、Axios 下载安装

<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

可以直接使用官网地址导入，也可以将其内容复制保存到本地文件进行使用：


​​返回顶部​​

三、Axios 基本使用

1、Aios 的请求方式

  • ​​get​​：获取数据，请求指定的信息，返回实体对象
  • ​​post​​：向指定资源提交数据（例如表单提交或文件上传）
  • ​​put​​：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
  • ​​patch​​：更新数据，是对put方法的补充，用来对已知资源进行局部更新
  • ​​delete​​：请求服务器删除指定的数据

​​get​​、​​post​​请求基本语法：

<!-- get 形式传递参数使用 ？拼接 -->
axios.get(地址?key1=value&key2=values).then(function(response){},function(err){})
<!-- post 形式传递参数为一个对象 -->

Get 请求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- 官网提供的 axios 在线地址 -->
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <script>/*
        接口1:随机笑话
        请求地址:https://autumnfish.cn/api/joke/list
        请求方法:get
        请求参数:num(笑话条数,数字)
        响应内容:随机笑话
      */
      document.querySelector('.get').onclick = function(){
                // get 形式传递参数使用 ？拼接
        axios.get("https://autumnfish.cn/api/joke/list1?num=3")
        .then(function(response){
          // 控制台打印输出获取的响应对象的信息
          console.log(response);
        },function(err){
          // 控制台打印输出请求失败的信息
          console.log(err);
        })
      }</script>
  </body>
</html>

语法中的 ​​then(function(response){},function(err){})​​ 包含了两部分内容分别表示请求成功、失败时的处理方式。就拿上面的代码来说，当请求成功的时候将请求获取的对象信息在控制台输出；当请求失败的时候，将错误内容在控制台输出：

【Vue】Axios 网络请求库_vue_03

【Vue】Axios 网络请求库_ios_04

​​返回顶部​​

Post 请求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- 官网提供的 axios 在线地址 -->
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <script>/*
          接口2:用户注册
          请求地址:https://autumnfish.cn/api/user/reg
          请求方法:post
          请求参数:username(用户名,字符串)
          响应内容:注册成功或失败
       */
      document.querySelector('.post').onclick = function(){
                // post 形式传递参数为一个对象
        axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
        .then(function(response){
          // 控制台打印输出获取的响应对象的信息
          console.log(response);
        },function(err){
          // 控制台打印输出请求失败的信息
          console.log(err);
        })
      }</script>
  </body>
</html>

【Vue】Axios 网络请求库_ios_05

​​post请求​​模拟的是用户注册，当注册过后返回的对象中的data信息为“已被注册，请检查”，反之 “注册成功”：

【Vue】Axios 网络请求库_axios_06

​​返回顶部​​

总结

  • ​​post​​ 形式传递参数为一个对象
  • 使用​​get​​、​​post​​等方法即可发送对应的请求
  • ​​then​​方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取响应内容,或错误信息

四、Axios & Vue

axios 如何结合 vue 开发网络应用呢？接下来我们就一起看一下~

【Vue】Axios 网络请求库_数据_07

如下图所示，请求地址每刷新一次就会产生一条笑话：

【Vue】Axios 网络请求库_vue_08

案例：获取笑话

我们的目的是使用 ​​axios​​ 、​​vue​​ ，在页面建立一个按钮，每点击一次，文本标签中就会将请求获取的对象中的​​data属性值​​（笑话）展示出来：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 导入 axios、vue  -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/v2.6.10/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="获取笑话" @click="getJoke"/>
      <p>{{ joke }}</p>
    </div>
    <script>/*
        接口:随机笑话
        请求地址:https://autumnfish.cn/api/joke/list
        请求方法:get
        响应内容:随机笑话
      */
      var app = new Vue({
        el:'#app',
        data:{
          joke:'即将展示一个笑话！'
        },
        methods:{
          getJoke:function(){
                        // 暂时存储外部的 this 对象
            var tmp = this;
            console.log(this.joke);
            axios.get("https://autumnfish.cn/api/joke")
            .then(function(response){
              // 将笑话信息传递给外部的this下的joke
              tmp.joke = response.data;
                            // 控制台输出打印响应对象中的data笑话信息
              console.log(response.data);
            },function(err){
              console.log(err);
            })
          }
        }
      });</script>
  </body>
</html>

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

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

【Vue】Axios 网络请求库_数据_09

​​返回顶部​​

五、网络应用案例

【Vue】Axios 网络请求库_数据_10

1、分析步骤

【Vue】Axios 网络请求库_html_11

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

​​返回顶部​​

2、html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 导入js文件 -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/v2.6.10/vue.min.js"></script>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class='wrap' id="app">
      <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt=logo''></div>
          <div class="form_group">
          <!-- v-model='city' 双向绑定数据 ； @keyup.enter="searchWeather" 键盘回车事件进行查询-->
          <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model='city' @keyup.enter="searchWeather"/>
          <button class="input_sub">  搜 索 </button>
        </div>  
        <div class="hotkey">
          <!-- 热门城市点击查询事件（实质是更改城市的值） -->
          <a href="javascript:;" @click="changeCity('北京')">北京</a>
          <a href="javascript:;" @click="changeCity('南京')">南京</a>
          <a href="javascript:;" @click="changeCity('上海')">上海</a>
          <a href="javascript:;" @click="changeCity('重庆')">重庆</a>
        </div>
      </div>
      <ul class="weather_list">
        <!-- 遍历生成查询结果的列表 -->
        <li v-for="item in weatherList">
          <div class="info_type">
            <!-- 展示天气状况 -->
            <span class="iconfont">{{ item.type }}</span>
          </div>
          <div class="info_temp">
            <!-- 展示最低气温 -->
            <b>{{ item.low }}</b>
            ~
            <!-- 展示最高气温 -->
            <b>{{ item.high }}</b>
          </div>
          <!-- 展示日期信息 -->
          <div class="info_date">
            <span>{{ item.date }}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 必须放在后面 -->
    <script src="./js/main.js"></script>
  </body>
</html>

​​返回顶部​​

3、main.js

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
*/
// 创建 Vue 实例
var app = new Vue({
  el: "#app", // 挂载点
  data: { // 数据
    city: '', // 搜索的城市
    weatherList: [] // 获取的城市天气信息列表
  },
  methods: {
    // 查询天气
    searchWeather: function() {
      console.log('天气查询');
      // 打印当前城市
      console.log(this.city);
      // 调用接口
      // 保存this
      var that = this;
      axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
        .then(function(response) {
          // console.log(response);
          // 根据response结构获取天气信息
          console.log(response.data.data.forecast);
          that.weatherList = response.data.data.forecast;
        })
        .catch(function(err) {})
    },
    // 热门城市点击事件 --- 更该城市
    changeCity: function(city) {
      // 改变城市
      this.city = city;
      console.log(this.city);
      // 查询天气
      this.searchWeather();
    }
  },
})

​​返回顶部​​

4、效果展示

【Vue】Axios 网络请求库_axios_12

​​返回顶部​​

5、关键步骤解析

5.1 城市参数值

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

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

<!-- v-model='city' 双向绑定数据 ； @keyup.enter="searchWeather" 键盘回车事件进行查询-->
<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model='city' @keyup.enter="searchWeather"/>

<div class="hotkey">
    <!-- 热门城市点击查询事件（实质是更改城市的值） -->
    <a href="javascript:;" @click="changeCity('北京')">北京</a>
    <a href="javascript:;" @click="changeCity('南京')">南京</a>
    <a href="javascript:;" @click="changeCity('上海')">上海</a>
    <a href="javascript:;" @click="changeCity('重庆')">重庆</a>
</div>

<script>// 创建 Vue 实例
var app = new Vue({
    el: "#app", // 挂载点
    data: { // 数据
        city: '', // 搜索的城市
    },
    methods: {
        // 查询天气
        searchWeather: function() {
            console.log('天气查询');
            // 打印当前城市
            console.log(this.city);
        },
        // 热门城市点击事件 --- 更该城市
        changeCity: function(city) {
            // 改变城市
            this.city = city;
            // 控制台打印城市
            console.log(this.city);
        }
    },
});</script>


【Vue】Axios 网络请求库_vue_13

​​返回顶部​​

5.2 城市天气数据

【Vue】Axios 网络请求库_ios_14

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

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

【Vue】Axios 网络请求库_axios_15

​​返回顶部​​

5.3 数据展示

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

<ul class="weather_list">
    <!-- 遍历生成查询结果的列表 -->
    <li v-for="item in weatherList">
        <div class="info_type">
            <!-- 展示天气状况 -->
            <span class="iconfont">{{ item.type }}</span>
        </div>
        <div class="info_temp">
            <!-- 展示最低气温 -->
            <b>{{ item.low }}</b>
            ~
            <!-- 展示最高气温 -->
            <b>{{ item.high }}</b>
        </div>
        <!-- 展示日期信息 -->
        <div class="info_date">
            <span>{{ item.date }}</span>
        </div>
    </li>
</ul>

【Vue】Axios 网络请求库_html_16

​​返回顶部​​

5.4 热门城市查询

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

<!-- v-model='city' 双向绑定数据 ； @keyup.enter="searchWeather" 键盘回车事件进行查询-->
<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model='city' @keyup.enter="searchWeather"/>

<!-- 热门城市点击查询事件（实质是更改城市的值） -->
<a href="javascript:;" @click="changeCity('北京')">北京</a>

<script>// 查询天气
searchWeather: function() {
    console.log('天气查询');
    // 打印当前城市
    console.log(this.city);
    // 调用接口
    // 保存this
    var that = this;
    axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
        .then(function(response) {
          // console.log(response);
          // 根据response结构获取天气信息
          console.log(response);
          that.weatherList = response.data.data.forecast;
        })
        .catch(function(err) {})
    },
// 热门城市点击事件 --- 更该城市
changeCity: function(city) {
    // 改变城市
    this.city = city;
    console.log(this.city);
    // 查询天气
    this.searchWeather();
}</script>

​​返回顶部​​


举报

相关推荐

网络请求库axios

kafkassl分布式

Vue3.0（八）：网络请求库axios

windowsrust开发语言

vue axios网络请求封装

iosVue封装iOS移动开发

【axios网络请求库】认识Axios库；axios发送请求、创建实例、创建拦截器、封装请求

axios前端

Vue.js_41_ 网络请求（axios）

vueiosjsonjquery

axios 网络请求

javascriptvue.js前端

鸿蒙开发实战：网络请求库【axios】

分布式

封装Vue中的axios请求库

vue.jsjavascript前端

请求网络时检查token，对网络请求做处理（axios）（vue）

网络vue.js前端

axios+vue 网页请求

vue.jsjavascript前端
0 条评论