nuxt集成axios

  1. 添加@nuxt/axios模块

    1
    2
    3
    4
    5
    // nuxt.config.js
    modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
      ]

  2. 创建 plugins/axios.js 文件,并且添加到nuxt.config.js plugins 部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // plugins/axios.js
    // 在这个文件扩展axios
    // 比如拦截器
    export default function ({ $axios, redirect }) {
      $axios.onRequest((config) => {
        console.log('Making request to ' + config.baseURL)
      })

      $axios.onError((error) => {
        console.log('error', error.config)
        const code = parseInt(error.response && error.response.status)
        if (code === 400) {
          redirect('/400')
        }
      })
    }

  3. 开发环境设置

    package.json

    1
    2
    3
    4
    5
    6
    7
    8
    "scripts": {
       "dev": "cross-env NODE_ENV=development nuxt",
       "start": "cross-env BASE_URL=https://www.fastmock.site/mock/f439fbc065d4f2589540eb4c13c98c0d/api NODE_ENV=production nuxt start",
       "build": "cross-env BASE_URL=https://www.fastmock.site/mock/f439fbc065d4f2589540eb4c13c98c0d/api NODE_ENV=production nuxt build",
       "generate": "cross-env BASE_URL=https://www.fastmock.site/mock/f439fbc065d4f2589540eb4c13c98c0d/api NODE_ENV=production nuxt generate",
       "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
       "lint": "yarn lint:js"
     },

    nuxt.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    env: {
        baseURL: process.env.BASE_URL, // 通过cross-env 传入
      },
      axios: {
        baseURL: process.env.BASE_URL, // api请求baseURL 
        proxy: true,
        prefix: '/api',
        credentials: false,
      },
      proxy: {
        '/api': {
          target:
            'https://www.fastmock.site/mock/aad51ea8550cdcd9b4dfa07f8f812ae3/api',
          changeOrigin: true,
          pathRewrite: {
            '/api': '/',
          },
        },
      },

  4. api统一放在plugin/api.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    export default function ({ app, $axios, redirect }, inject) {
      const API = {}

      API.getUserInfo = function () {
        return $axios({
          url: '/getUserInfo',
          method: 'GET',
        })
      }

      app.api = API
      inject('api', API)
    }

  5. axios 使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <template>
      <div>
        <nuxt-link to="/about">关于</nuxt-link>
        <div>{{ userInfo.name }}</div>
        <div>{{ userInfo.age }}</div>
        <div>{{ userInfo.sex }}</div>
        <div>{{ userInfo.tel }}</div>
      </div>
    </template>

    <script>
    export default {
      async asyncData({ $axios, app, store, $api, $nuxt }) {
        // console.log($api)
        console.log(process.env.BASE_URL)
        const { data } = await $api.getUserInfo()
        console.log(data)
        return {
          userInfo: data.data,
        }
      },
      data() {
        return {
          count: 1,
          userInfo: {},
        }
      },
      async fetch({ $axios, app, store, $api, $nuxt }) {
        // console.log($api)
        // if (process.server) {
        // const { data } = await $api.getPublicKey()
        // console.log(data)
        // }
      },
    }
    </script>