【Vue】使用 axios 发送ajax 请求

Vue 里面我们如何去发送一些 Ajax(阿贾克斯)请求 从远程的网站上获取一些数据。

假如我们有这样的接口的地址:https://www.xxxx.site

假设它是一个能跨域访问的接口。‍‍‍‍

如果我们想去在我们的代码里面发这种请求,我该怎么做?

首先我们要安装一个‍‍能够发请求的工具,在控制台里面运行一下npm install‍‍:

【Vue】使用 axios 发送ajax 请求

当你安装完了之后,我们就可以来写我们的代码了, 我先启动服务器:

【Vue】使用 axios 发送ajax 请求

我们可以先来写一下我们的代码,想发一个请求。 首先在About页面我们去引入 axios,‍‍ 如果我想发一个请求,我怎么发?

在setup函数里面,我们可以在顶部去写一下‍‍axios点get,【类比Python中的requests.get】

然后我们写一下发送到哪个接口,发送到这个接口:https://www.xxxx.site

然后我们写一个点then, 然后我们会获取到接口发送回来的结果,

比如说response,我console点log一下‍‍,

【Vue】使用 axios 发送ajax 请求

保存,回到我的页面上,打开控制台,在About这个页面我们刷一下,‍‍大家可以看到它会把请求返回的内容打印出来:

【Vue】使用 axios 发送ajax 请求

它返回的结果是什么? 说有error,‍‍

它返回的内容是一个error,我们看一下我的请求是不是这样的?‍‍

【Vue】使用 axios 发送ajax 请求

它会发一个‍‍ register这样的请求,请求的返回结果就是这样的一个内容,

我们可以用一下里面的message,‍‍怎么用?

我们这样用:

【Vue】使用 axios 发送ajax 请求

它会把 message 打印出来:

【Vue】使用 axios 发送ajax 请求

在 Vue 里面如何发一个请求?直接使用 axios 来发送就行了。‍‍

我可以通过 axios 这个工具去便捷的向某些接口发送接口请求,

然后获取完数据后进行页面的展示。‍‍


原文始发于微信公众号(基根奋斗营):【Vue】使用 axios 发送ajax 请求

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/103765.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!