Vue的Axios 的使用(axios简介、axios与vue钩子结合使用、实验)全解

这篇具有很好参考价值的文章主要介绍了Vue的Axios 的使用(axios简介、axios与vue钩子结合使用、实验)全解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


知识点

  • 什么是 Axios
  • Axios 基本用法
  • Axios 与 Vue 的钩子函数的结合使用

Axios 简介

什么是 Axios

Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装,且具有易用、简洁、高效等特点。

Axios 的特点

它本身具备以下作用:

  • 可以从浏览器中创建 XMLHttpRequest。
  • 能从 Node.js 创建 HTTP 请求。
  • 支持 Promise API。
  • 能够拦截请求和响应。
  • 可以转换请求和响应数据。
  • 也可取消请求。
  • 可以自动转换 JSON 数据。
  • 在客户端支持防止 CSRF/XSRF 攻击。
    Axios 的安装方式

Axios 的安装与其他框架或插件类似,也是分为以下两种:

  • npm 安装
npm install axios
  • 使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios 基本用法

使用以下命令获取 axios 文件:

wget https://labfile.oss.aliyuncs.com/courses/10532/axios.min.js

首先,打开我们的线上环境,创建一个名为 demo1.html 的文件,并引入 axios.js。代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Axios 的 CDN -->
    <script src="axios.min.js"></script>
  </head>
  <body></body>
</html>

然后,创建一个名为 test.json 的文件,作为接下来使用 Axios 请求的数据文件,并写入以下数据:

{
  "msg": "Hello Axios!"
}

最后,在 demo1.html 中使用 Axios 发送一个简单的 Ajax 请求,用于获取 test.json 中的数据,并输出在控制台:

<script type="text/javascript">
  axios.get("./test.json").then((res) => {
    console.log(res);
  });
</script>

axios在vue中的使用,HTML和CSS外加JavaScript自学历程,vue.js,javascript,前端,axios

我们会发现,通过 Axios 获取到的数据实际上就是一个 Ajax 对象,真正需要我们请求的数据是该 Ajax 对象的 data 属性值。
上面这个例子只是 Axios 众多使用方式中的一种,它主要是用于执行 get 请求。
下面我们看几个它比较常用的使用方式。

  • 执行 get 数据请求。
axios.get('url',{
  params:{
    id:'接口配置参数(相当于url?id=xxxx)',
  },
}).then(function(res){
  console.log(res); // 处理成功的函数 相当于 success
}).catch(function(error){
  console.log(error) // 错误处理 相当于 error
})
  • 执行 post 数据请求并发送数据给后端。
axios
  .post(
    "url",
    { data: {} },
    {
      headers: "xxxx", // 头部配置
    }
  )
  .then(function (res) {
    console.log(res); // 处理成功的函数 相当于 success
  })
  .catch(function (error) {
    console.log(error); // 错误处理 相当于 error
  });
  • 通用方式(适用于任何请求方式)。
//-------------------get-----------------------//
axios({
  method: "get",
  url: "xxx",
  cache: false,
  params: {
    id: 123,
  },
  headers: "xxx",
});
//-------------------post-----------------------//
axios({
  method: "post",
  url: "xxx",
  data: {
    firstName: "Tom",
    lastName: "Sun",
  },
});

其中需要注意的是,get 和 post 请求中向后端传递参数的配置项名字不同:get 请求的需要使用 params,post 请求用于发送数据的为 data。

关于 Axios 的基本使用方式就为大家演示到这里,作为一个独立的强大的 HTTP 库,它的功能远不止这些,大家可以通过 Axios 的官网学习。后续的实验中,我们也会结合实际案例,为大家展示它的更多功能,这里就不再一一展开讲解。

接下来,让我们一起看看它是如何与 Vue 的钩子函数结合使用的。

Axios 与 Vue 的钩子函数的结合使用

假设有这样一个需求:”当页面加载后我们就要展示一组数据到页面中“。
这个需求对于我们前端开发者来说稀松平常,因为对于大部分网页,我们需要保证的第一个需求基本上就是——这个页面加载后有数据展示。
那么,如果当前页面在使用 Vue 框架之后应该如何实现呢?🤔

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in dataList">{{item}}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          dataList: ["HTML", "CSS", "JavaScript", "Vue.js", "Axios"],
        },
      });
    </script>
  </body>
</html>

axios在vue中的使用,HTML和CSS外加JavaScript自学历程,vue.js,javascript,前端,axios

上面代码虽然看似满足了我们的需求,但是仔细想一下,又有些不对。到底哪里出问题了呢?🤔

对了,现实中页面的这些数据并不是写死在代码中的,而是需要动态的发送异步请求从后台接口中读取的。就像下图展示的那样:
axios在vue中的使用,HTML和CSS外加JavaScript自学历程,vue.js,javascript,前端,axios

由上图我们可以知道前后端的交互原理如下:

  • 前台接收用户的信息,发送到后台。
  • 后台获得信息后进行数据处理,到数据库取一些数据。
  • 后台拿到数据库数据返回给前台页面进行显示。

回过头来看我们的代码,并没有与后台交互的行为,而是直接将数据 dataList 初始化在了 data 中。
如何改进呢?🤔

先把数据存储在 JSON 文件中,然后使用 Ajax 将它读出来就行了。
于是就有了下面的代码。

  • Vue 与 Axios 结合使用

首先,创建 dataList.json 文件,将 demo2.html 中 dataList 的初始值存入其中:

["HTML", "CSS", "JavaScript", "Vue.js", "Axios"]

然后,对 demo2.html 进行了如下改写:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in dataList">{{item}}</li>
      </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          dataList: [],
        },
      });
      axios.get("dataList.json").then((res) => {
        console.log(res.data);
        app.dataList = res.data;
      });
    </script>
  </body>
</html>

结果一运行,居然成功了~ 😂

不过…这代码怎么感觉很奇怪?🤔

有没有觉得 axios() 方法有种“超脱三界之外”的错觉。😏

这样做虽然也实现了我们的需求,但是对于数据请求的方法我们没办法在 Vue 实例中进行管理,代码量多了之后就很难控制了。😓

如何改进呢?🤔

“将 axios() 方法的使用封装到 Vue 实例的 methods 中,并在适当时机调用!”

没错,这个思路是对的,我们一起来实现下。

先将使用 axios() 方法异步请求数据的步骤封装在 methods 中:

methods:{
    getData(){
        axios.get('dataList.json')
        .then(res=>{
                this.dataList = res.data;
        })
    }
}

然后再选择适当的时机,让程序自动调用上面封装好的 getData 方法。

那么问题来了,那个可以“自动调用 methods 中方法”的适当时机在哪?😳

这个时候就有需要钩子函数了~ 😊

但是,这么多钩子函数那个具备呢?

我们回想一下可以发现,从 created 开始,我们就可以更新 data 中的数据了;beforeUpdate 和 update 中又不能执行对 data 的更新操作(因为会死循环);beforeUnmount 和 unmounted 也不太合适(因为组件实例都要销毁了);这么看来,合适的也只有 created、beforeMount 和 mounted 了。

事实证明这三个函数都可以,不过我们一般会在 created 和 mounted 中做数据更新的操作,因为这两个函数分别是“实例初始化完成”和“组件挂载完成”的最佳时机。

那到底要用哪个呢?🤔

这里我们直接用 created 即可,因为这个时候组件还未挂载到 DOM 树上,并不会因为 data 中数据的更新而触发组件重新渲染一遍。😊

话不多说,直接上代码:

created(){
    this.getData();
},

实验总结

本实验先为大家介绍了什么是 Axios,以及它的基本用法。再结合 Vue 组件实例的钩子函数,为大家讲解了如何在 Vue 中,合理使用 Axios 发送异步数据请求,并在适当时机更新页面响应式数据的操作。文章来源地址https://www.toymoban.com/news/detail-782785.html

到了这里,关于Vue的Axios 的使用(axios简介、axios与vue钩子结合使用、实验)全解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用Axios详细流程

    使用 npm: 或使用 yarn: 在src/plugins目录下新建axios.js文件,在该文件里对axios进行自定义配置,如下图:  axios.js全部代码: 注意: axios.defaults.headers.common[\\\'Authorization\\\'] = `Bearer ${\\\"inittoken\\\"}` 或者   headers: {               \\\"Content-Type\\\": \\\"application/json;\\\",               Authorization: `B

    2024年02月08日
    浏览(33)
  • vue中axios的使用

    1.什么是axios 1.axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。 2.axios本质上也是对原生XHR的封装,只不过是promise的实现版本 3.用来向后端发送http请求,获取后端发送的数据 2.怎么在vue项目中使用axios 1.安装axios 2.axios二次封装 对axios进行二次封装主要是为了设置请求

    2024年02月01日
    浏览(22)
  • axios的使用、Vue中的动画、vue组件

    一、 先引用,然后         created(){             axios.post(this.baseUrl + \\\'/weChat/applet/course/list/type\\\', formurl) .then((res) = {}) .catch()         }, 二、 使用 过渡类名 HTML结构: div id=\\\"app\\\"     input type=\\\"button\\\" value=\\\"动起来\\\" @click=\\\"myAnimate\\\"       !-- 使用 transition 将需要过渡的元素包裹起来

    2024年02月07日
    浏览(39)
  • axios的使用以及Vue动画

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 安装方法 使用 npm: npm install axios 引入 import axios from “axios”; 使用 transition 将需要过渡的元素包裹起来 ​v-enter ​v-enter-active ​v-enter-to ​v-leave ​v-leave-active ​v-l

    2024年01月19日
    浏览(34)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(49)
  • uniapp微信小程序使用axios(vue3+axios+ts版)

    \\\"vue\\\": \\\"^3.2.45\\\",  \\\"axios\\\": \\\"^1.4.0\\\",  \\\"axios-miniprogram-adapter\\\": \\\"^0.3.5\\\", yarn add axios axios-miniprogram-adapter 在 utils 创建 utils/request.ts 文件 在 src 目录下创建 src/api/config 文件夹 config文件夹中创建home.ts文件,首页的接口都放在里面统一管理  和 config 文件夹同级创建home.ts文件,统一管理请求

    2024年02月16日
    浏览(63)
  • Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求: 3.2.3 发送post请求: 3.2.4 简化axio

    2024年02月07日
    浏览(53)
  • Vue对axios的封装及使用

    封装axios让调用接口变得轻量、简单 先安装 axios 通过npm 或者 yarn 安装 axios 配置 请求拦截器 和 响应拦截器 ,请求前缀等 创建 api 目录,创建 index.js 文件 引入刚刚封装的 http 文件 本文要是对你有帮助的话,麻烦帮忙一键三联,关注下,谢谢。

    2024年01月25日
    浏览(31)
  • vue 中 axios 的安装及使用

    首先,打开当前的项目终端,输入 验证是否安装成功,检查项目根目录下的 package.json,其中的 devDependencies 里面会多出一个axios及其版本号。

    2024年02月11日
    浏览(30)
  • 在vue中使用 axios 访问 API

    Vue 不像 jQuery 内置了 ajax 请求函数,在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。 所以 Vue 给了我们更多的选择空间,例如我们可以使用下面的可选方案: 原生的 XMLHttpRequest 原生的 Fetch 也可以结合使用 jQuery 自

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包