NuxtJS中使用axios，Nuxt封装axios请求

nuxt 项目通常都会给我们自带 @nuxtjs/axios 模块，如果你没有请安装

npm install @nuxtjs/axios -s

 安装完成之后我们打开 nuxt.config.js，在 modules 中配置如下

modules: [
    '@nuxtjs/axios'
],

完成之后就可以直接在 asyncData 里面使用 axios 了

• 组件内 asyncData 和 methods 中请求

async asyncData({app}){
    const $axios = app.$axios;
    //Fetch风格请求方式
    let res = await $axios.$get('http://xxx.com/api/xxx');
},
methods:{
    async fetch(){
        //Fetch风格请求方式
        let res = await $axios.$get('http://xxx.com/api/xxx');
    }
}

• Vuex 的 actions 请求

actions: {
    async getIP ({ commit }) {
        let {data:list} = await this.$axios.$get('http://xxx.com/api/xxx');
        commit('SET_DATA', list)
    }
}

这里主要说一下 Nuxt 中 axios 的封装，主要是 baseurl 在不同环境下的配置

• 在 plugins 目录下新建一个 api.js

export default function ({ $axios, redirect }) {
    // 根据环境变量设置baseUrl
    if(process.env.NODE_ENV == 'development'){
        $axios.defaults.baseURL = 'http://localhost:8000/';//开发环境baseurl
    }else if(process.env.NODE_ENV == 'debug'){
        $axios.defaults.baseURL = 'http://xxx.com:8000/';//测试环境baseurl
    }else if(process.env.NODE_ENV == 'product'){
        $axios.defaults.baseURL = 'http://xxx.com:8000/';//生产环境baseurl
    }

    $axios.onRequest(config => {
        console.log(config.baseURL)
    })

    $axios.onResponse(response => {
        console.log(response)
    })

    $axios.onRequestError(err => {
        console.log(err)
    })

    $axios.onResponseError(err => {
        console.log(err
    })

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

• 然后记得在 nuxt.config.js 中配置如下

plugins: [
    '@/plugins/api'
],

---

接下来我们就可以在 vue 文件中的 asyncData 中获取数据了，【注意：仅限页面组件 pages 目录下的文件使用，子组件不支持 asyncData】

<template>
  <div class="container">
    {{article.title}}
  </div>
</template>

<script>
export default {
  async asyncData({app}){
    let { api } = app;
    let {data:article} = await api.get('getArticleList');
    return {
      article:article
    }
  }
}
</script>

<style>
</style>

---

最后贴上 @nuxtjs/axios 官方文档

---

个人博客👉：点此进入（http://xueshuai.top）

PHP学习交流群👉：PHP学习交流群

前端学习交流群👉：前端交流群

微信公众号👉：叮当Ding