14、$axios异步加载数据asyncData

安装@nuxtjs/axios

https://axios.nuxtjs.org/setup

bash 复制代码
npm install @nuxtjs/axios

nuxt.config.js

javascript 复制代码
export default {
  modules: ['@nuxtjs/axios']
}

mock数据

https://mock.mengxuegu.com/

没有账号直接输入账号、密码登录会自动创建,没有修改密码的入口需要保存好账号密码。

使用

https://axios.nuxtjs.org/usage

asyncData

javascript 复制代码
async asyncData({ $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  return { ip }
}

methods/created/mounted/etc

javascript 复制代码
methods: {
  async fetchSomething() {
    const ip = await this.$axios.$get('http://icanhazip.com')
    this.ip = ip
  }
}
相关推荐
共享家952733 分钟前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn2 小时前
基于封装的专项 知识点
java·前端·python·算法
摘星编程2 小时前
OpenHarmony环境下React Native:自定义useTruncate文本截断
javascript·react native·react.js
Duang007_3 小时前
【LeetCodeHot100 超详细Agent启发版本】字母异位词分组 (Group Anagrams)
开发语言·javascript·人工智能·python
2601_949868364 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 主入口实现
开发语言·javascript·flutter
m0_748229994 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒5 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..5 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
摘星编程5 小时前
在OpenHarmony上用React Native:自定义useHighlight关键词高亮
javascript·react native·react.js
hhy_smile5 小时前
Class in Python
java·前端·python