阅读 43

《跟热饭一起学习vue吧》Part.23 发送请求axios

发送请求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来使用内部变量。

图片大家可能还是理解不足,那么就请死记硬背这段即可,因为这段代码将是我们以后用到频率最高的地方

好了本节课就到这里,怎么样,是不是感觉很简单???感觉简单的话,就立马关注下本公众号吧~ 进群学习请加v:qingwanjianhua

本文使用 文章同步助手 同步

文章分类
开发工具
文章标签