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

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

npm install @nuxtjs/axios -s

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

modules: [
    '@nuxtjs/axios'
],

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

  • 组件内 asyncDatamethods 中请求
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');
    }
}
  • Vuexactions 请求
actions: {
    async getIP ({ commit }) {
        let {data:list} = await this.$axios.$get('http://xxx.com/api/xxx');
        commit('SET_DATA', list)
    }
}

这里主要说一下 Nuxtaxios 的封装,主要是 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

 

 

 

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页