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

轩陌

分类: Vue 7860 5

前言

由于之前写这个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)
  }
}
  • 28人 Love
  • 7人 Haha
  • 3人 Wow
  • 2人 Sad
  • 3人 Angry
@nuxtjs/axios、nuxtjs

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 5 条评论关于 “在Nuxtjs中使用@nuxtjs/axios与vuex的一些心得”

Loading...