vue如何利用axios来完成数据的交互

这篇文章主要为大家展示了“vue如何利用axios来完成数据的交互”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何利用axios来完成数据的交互”这篇文章吧。

网站的建设创新互联公司专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都自拌料搅拌车等企业提供专业服务。

axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用

现在Vue官方推荐的网络通信库不再是vue-resource了，推荐使用axios。所以学习了下，总结如下。

一、功能特性

1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、自动转换 JSON 数据
7、客户端支持保护安全免受 XSRF 攻击

二、axios的安装方法（官方给了3种方法）

1、npm安装

$ npm install axios

2、bower安装

$ bower install axios

3、直接使用cdn

三、安装步骤

这里我使用npm的方法步骤：

①首先在npm中输入npm install axios

②在main.js加上配置

import axios from ‘axios' 
Vue.prototype.$http = axios

四、请求实例

点击获取数据可以取到想要的数据

*{margin: 0;padding: 0;}
@function torem($px){//$px为需要转换的字号
  @return $px / 100px * 1rem; //100px为根字体大小
}
ul{
 width: 100%;
 position: absolute;
 bottom: 0;
 li{
  width: torem(187.5px);
  float:left;
  height: torem(98px);
  text-align:center;
  background: #ccc;
  }
}
img{
   width: torem(200px);
   height: torem(200px);
  }

效果图：

以上是“vue如何利用axios来完成数据的交互”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！