在Nuxtjs中使用@nuxtjs/axios与vuex的一些心得

前言

由于之前写这个 nuxt 结合 wordpress 的主题的时候，自己也算是有点懵逼的状态，写的有点乱，数据管理也是不统一，报错信息也是做得不是很好，刚好花了一天时间重构了一下数据管理这一块的代码，也算是踩了一些 nuxt 的坑吧。之前是用的 axios 这个库，这次换 nuxt 官方封装的一个库了，也就是 @nuxtjs/axios 这个了，之所以换这个的原因主要是官方推荐，做了封装，能更好的与 nuxt 结合使用。nuxt-axios 文档：https://axios.nuxtjs.org/

主要遇见的问题

nuxt 会为每个请求自动加上 loading，但是并不想每个都需要，官方给了一种方法，通过请求配置的 progress:false 禁用 loading，但是我设置了不起作用，this.$axios.$get('URL', { progress: false})

默认的返回结果是不返回请求头这些字段的，只会给 response.data 里面的数据，所以需要做一下处理

以下是我对 axios 的简单封装

response 拦截；改变了一下 response.data 的返回格式：

$axios.onResponse(response => {
  response.data = {
    data: response.data,
    status: response.status,
    headers: response.headers,
    statusText: response.statusText
  }
  return response
})

关于 loading 我分为两个处理，get 请求通过 data 字段传入 progress 字段，如果是 post 请求就把 progress 字段放在 headers 传入：

$axios.onRequest(config => {if (config.method === 'get') {config.data && (config.progress = config.data.progress)
    config.data = null
  } else {let contentType = config.headers['Content-Type']
    if (contentType && contentType.indexOf('multipart/form-data') === -1) {let data = {}
      for (let [key, value] of Object.entries(config.data)) {key !== 'progress' && (data[key] = value)
      }
      config.data = data
    }
    config.progress = config.headers.progress
    delete config.headers.progress
  }
  return config
})

全局错误信息的拦截，由于现在的数据都是 vuex 统一管理，所以请求报错直接在这里统一处理：

$axios.onError(error => {const code = parseInt(error.response && error.response.status)
  code >= 400 && redirect(`/${code}`)
  return Promise.reject(error.response)
})

完整示例，新建一个 plugins/axios.js 文件，然后在 nuxt.config.js 引入这个插件就能使用了，详细代码可以查看：https://github.com/D-xuanmo/xm-nuxtjs-wordpress

export default function ({$axios, redirect}) {$axios.onRequest(config => {if (config.data) {if (config.method === 'get') {
        // 如果是 get 请求，progress 通过 data 字段传入，通过直接传入接收不到这个字段
        config.progress = config.data.progress
      } else {let ContentType = config.headers['Content-Type']
        if (ContentType && ContentType.indexOf('multipart/form-data') === -1) {let data = {}
          for (let [key, value] of Object.entries(config.data)) {key !== 'progress' && (data[key] = value)
          }
          config.data = data
        }
        config.progress = config.headers.progress
        delete config.headers.progress
      }
    }
    return config
  })

  $axios.onResponse(response => {
    response.data = {
      data: response.data,
      status: response.status,
      headers: response.headers,
      statusText: response.statusText
    }
    return response
  })

  $axios.onError(error => {const code = parseInt(error.response && error.response.status)
    code >= 400 && redirect(`/${code}`)
    return Promise.reject(error.response)
  })
}

下边是我 vuex 的上传图片请求

async uploadImage ({commit}, {requestData, config}) {
  try {let { data} = await this.$axios.$post(`/api/wp-content/themes/xm-vue-theme/xm_upload.php`, requestData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        progress: false
      },
      ...config
    })
    return Promise.resolve(data)
  } catch (error) {return Promise.reject(error)
  }
}