【Vue】Axios 网络请求库

lewis 1年前 (2024-03-29) 阅读数 5 #技术

文章目录Axios 网络请求库一、Axios 简介二、Axios 下载安装三、Axios 基本使用1、Aios 的请求方式Get 请求Post 请求四、Axios & Vue案例：获取笑话五、网络应用案例1、分析步骤2、html3、main.js4、效果展示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中发送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){}) 包含了两部分内容分别表示请求成功、失败时的处理方式。就拿上面的代码来说，当请求成功的时候将请求获取的对象信息在控制台输出；当请求失败的时候，将错误内容在控制台输出：

返回顶部

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>

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

返回顶部

总结

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

四、Axios & Vue

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

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

案例：获取笑话

我们的目的是使用 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即可和本地应用的最大区别就是改变了数据来源

返回顶部

五、网络应用案例

1、分析步骤

应用的逻辑代码建议和页面分离，使用单独的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、效果展示

返回顶部

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>

返回顶部

5.2 城市天气数据

通过对城市请求的数据结构分析，前期真正数据被封装在 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) {})

返回顶部

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>

返回顶部

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>

返回顶部

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：C++11内存模型这么理解下一篇： strcmp函数是C/C++中的一个字符串比较函数，用于比较两个字符串的大小。它的用法如下

【Vue】Axios 网络请求库

版权声明

作者文章