发送请求axios
学习了这么多vue知识,我们其实已经可以用vue做很多事了,但是还有一个重要的事情,我们忘记说了,就是如何用vue发送http请求。
其实发送一个请求的代码,跟vue关系并不大,无论你用什么前端框架都少不了要发送请求这个功能。
我们前面也说过,在vue的methods里可以写各种各样的js代码,甚至调用页面上其他js函数。
那么本节课要讲的其实就只是,在vue里如何标准的用axios来发送一个请求出去。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单理解,就是一个调用浏览器来发送http请求的功能,也是需要你导入的,和vue同级的js模块。
导入 axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 或 <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
axios放在哪里?答 mounted 里。
mounted是什么?它也是vue构造器的一个属性,或者说一个钩子函数。一般在初始化页面完成后,再对dom节点进行相关操作。这里并不是我们本章要研究的内容。
大家只要记得它的值是一个函数,而axios的代码就放在这个函数内即可。
get请求
其中的 .get就是请求的具体url .then 就是获取正常返回后要做的事 .catch 就是如果接口请求失败要做的事
其中的 response 就是返回值,被赋值给了 这个this.info, 这个this.info 就是vue构造器data变量info,默认是null。
error就是如果请求失败的返回值,也就是报错信息,这里的失败指的不是你司接口自己写的失败信息,而是http状态码404 500等这种,报错信息一般也会很常见。
monuted 简写
可以把 mounted:function() {}
简写成:
mounted () {}
post请求
可以看出,除了多了一个请求体之外,其他和get请求都一样。
.then 简写
正常是这么写的:
但是这种写法,想对vue构造器data中的变量赋值,就没法用this.xxx了,因为构造器本身没进来。
所以图中我才对vue构造器进行实例化,就是弄个小v 来代表构造器,然后再.then里,用v.info 来赋值。
这种写法显然更麻烦,所以便有了新的简单写法,可以让vue构造器自身代入进来直接用this.xxx来使用内部变量。
大家可能还是理解不足,那么就请死记硬背这段即可,因为这段代码将是我们以后用到频率最高的地方