Nuxt中针对axios做二次封装小记

使用Nuxt开发网站，不可避免需要请求接口，而请求接口用得最多的就是axios了，但是直接使用axios来请求接口可能会有诸多不便，所以在此基础上就做了二次封装，方便开发过程中使用，下面就简单介绍一下我个人是如何封装的。

一、安装@nuxtjs/axios模块

#这个是Nuxt自带的模块
npm i @nuxtjs/axios -S

二、plugins目录中新增axios.js文件

export default ({ $axios, app, store }, inject) => {
  //请求拦截
  $axios.interceptors.request.use(
    (config) => {
      /** 如果接口需要携带请求头可以在此设置
      const baseHeaders = getAccessApiHeaders(app)
      config.headers = {
        ...baseHeaders,
        ...config.headers
      }
      */
      if (
        config.method === 'post' ||
        config.method === 'put' ||
        config.method === 'delete'
      ) {
        config.data = {
          ...config.data
        }
      } else if (config.method === 'get') {
        config.params = {
          ...config.params
        }
      }
      return config
    },
    (error) => {
      // 对请求错误做些什么
      return Promise.reject(error)
    }
  )
  //相应拦截
  $axios.interceptors.response.use(
    (response) => {
      //返回结果
      return response.data
    },
    (err) => {
      const status = err.response.status
      //其他错误情况统一处理
      const errorMsg = {
        code: -1,
        msg: '服务器内部错误',
        data: {
          status: status,
          message: err.response.statusText
        }
      }
      //返回数据
      return errorMsg
    }
  )
  //请求Api接口
  inject('requestApi', (url, data = {}, method = 'GET') => {
    if (method == 'GET') {
      return $axios.get(url, {
        params: data
      })
    } else {
      return $axios.post(url, data)
    }
  })
}

三、plugins目录中新增api.js文件用于接口的统一配置

export default ({ app }, inject) => {
  //配置基础接口域名
  let baseApiDomain = 'https://api.xxx.com/'
  //基准域名
  const baseApiUrl = baseApiDomain + 'api'
  //接口配置
  const _API = {
    //评论列表接口
    getCommentList: (data) =>
      app.$requestApi(`${baseApiUrl}/aosbase/_comment_show`, data),
    //发表评论
    submitComment: (data) =>
      app.$requestApi(`${baseApiUrl}/aosbase/comment_sub`, data, 'POST'),
    //可以添加更多接口...
  }
  //注入到全局nuxt示例中
  inject('api', _API)
}

四、在nuxt.config.js中增加如下的配置

plugins: [
    '@/plugins/api',
    ...
],
modules: [
    '@nuxtjs/axios',
    ...
],
axios: {
    baseURL: '/'
},

五、使用

1.服务端周期中使用（例如：asyncData中使用）

//示例代码
async asyncData({ app, params }) {
    //获取评论列表
    const commentList = await app.$api.getCommentList({
        offset: 0,
        count: 5
    })
     if (res.code === '0') {
         return {
            //评论列表
            commentList:res.data
         }
    }
}

2.客户端周期中使用（例如mounted中使用调用方法）

//示例代码
//methods中定义方法
async getCommentList() {
  const params = {
      offset: 0,
      count: 10
  }
  const res = await this.$api.getCommentList(params)
  if (res.code === '0') {
     //评论列表
     this.commentList = res.data
  }
},