Xuanmo Blog

前言

由于之前写这个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)
  }
}