如何在 nuxt.js 中使用 axios.js 在组件和页面请求数据？

布吉_岛

已于 2022-11-23 22:37:40 修改

阅读量1.1k

点赞数

分类专栏：经验记录文章标签： vue typescript nuxt.js asyncData fetch

于 2021-03-04 11:33:54 首次发布

本文链接：https://blog.csdn.net/zx110503/article/details/114364615

版权

本文个人博客地址：https://www.leafage.top/posts/213489UI

上一篇创建了前端工程，接下来开始写代码。

因为初始化项目，只是最小的一些基本依赖，再开发中，需要一些第三方的库来支持，比如样式/组件库。

在开发Leafage网站的过程中，我试用过viewui(原来叫iview)、element-ui、ant design vue、vuetify这几个组件库，但是约到后面会发现，使用组件库是比较容易开发界面，但是限制很多，而且很多文档写的不好，稍微复杂点的组合或者配置，很难实现，还有最重要的一点，除了vuetify之外的几个组件库，都不是默认支持响应式的，需要自己适配，后来发现了nuxtjs的官网用的是css样式库tailwindcss，与它同样类似的还有bulma，bulma和tailwindcss都是css开发的，不包含任何框架依赖，但是bulma更类似于bootstrap，区别是不依赖jquery等任何Javascript，参考nuxtjs官网的开发，选择使用tailwindcss。

作为一个java开发的程序员，从零开始写前端，还不用组件库，是很难肯痛苦的事情，那找一个好看的模板来模仿，总是容易的吧，然后就开始网罗各大模板网站，有的模板可能需要花几块钱，买一个自己满意的，然后参照来写或者直接进行修改。

页面开发完成之后，需要请求服务接口，由于现在还没有开发后台服务，所以需要使用mock.js来进行api的模拟。

首先安装mock.js依赖：

yarn add mock.js -D

安装完成后，打开plugins目录，添加 mock.ts 文件（如果使用的是javascript，则创建mock.js），配置mock接口，示例如下：

import Mock from 'mockjs'

Mock.mock(/posts\.json/, {
   
  'list|1-10': [{
   
    'id|+1': 1,
    'title': 'my title'
  }]
})

配置完成之后，需要在nuxt.config.ts文件中进行配置，才会生效，否则，会执行默认的配置；

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/mock'
  ],

接下来就使用axios请求接口，获取数据了。

1、配置axios

因为初始化项目时，安装了axios工具，现在就可以在页面（pages目录下的.vue）或者组件（components目录下的.vue）中使用axios来请求数据。nuxtjs默认会配置axios的一些配置，如果想要进行自己的一些配置，那么在plugins目录下创建axios.ts文件，然后进行相关设置，参考如下：

import {
    Plugin } from '@nuxt/types'
import {
    AxiosRequestConfig, AxiosError } from 'axios'

const statusCode: any = {
   
  400: '请求参数错误',
  401: '权限不足, 请重新登录',
  403: '服务器拒绝本次访问',
  500: '内部服务器错误',
  501: '服务器不支持该请求中使用的方法',
  502: '网关错误',
  504: '网关超时'
}

export const accessor: