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
  }
}
相关推荐
excel9 分钟前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着22 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名?
前端·后端·安全
会豪4 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin5 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js