博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Nuxt之asyncData方法获取数据
阅读量:6389 次
发布时间:2019-06-23

本文共 792 字,大约阅读时间需要 2 分钟。

在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了anyncData方法。从名字上就很好理解,这是一个异步的方法。

一. 创建远程数据

在这里制作一些假的远程数据,我选择的网站是myjson.com,它是一个json的简单仓库,学习使用是非常适合的。 我们打开网站,在对话空中输入JSON代码,这个代码可以自己随意输入哦。

{  "name": "laowang",  "age": 18,  "interest": "I love coding"}复制代码

输入后,网站会给你一个地址,这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/mr6ma

二. 安装Axios

npm i axios --save复制代码

三. ansycData的promise方法

在pages下新建文件asyncData.vue

复制代码

这时候我们可以看到,浏览器中已经能输出结果了。

四. ansycData的await方法

当然上面的方法稍显过时,现在都在用ansyc…await来解决异步,改写上面的代码。

复制代码

本文引用于,感谢胖哥

转载地址:http://cpcha.baihongyu.com/

你可能感兴趣的文章
Python 简单的数据结构(一)
查看>>
谁说我们只会做工作流?做实验室管理系统我们也内行。
查看>>
yum安装开发库
查看>>
我的友情链接
查看>>
开源Python网络爬虫资料目录
查看>>
NSRunLoop Internals
查看>>
Hadoop2.4.1分布式安装
查看>>
PHP利用socket来实现POST数据
查看>>
Connection is read-only问题的产生原因与解决方法
查看>>
Proxmox VE 部署维护
查看>>
Linux软件包安装与卸载
查看>>
centos5.x安装sphinx
查看>>
3分钟搭建Ant Design Pro前端开发环境( MyClouds的前端选型)
查看>>
Scala各种用法
查看>>
Linux系统常用命令(二)
查看>>
简单的工厂模式学习
查看>>
温习如何画E-R图
查看>>
eclispe注释模板
查看>>
Thymeleaf教程 (三) 创建一个多语言的首页
查看>>
OSChina 周六乱弹 ——你们猜狗的舌头有多长
查看>>