解决vue-i18n在非.vue文件中,在其他js文件,譬如axios拦截器等js文件中如何使用的问题

需求:多语言网站,网络提示错误信息也需要支持多语言切换,一般i18n在.vue文件中的模板里按照api调用就可以了。
那么在.js文件中如何使用呢?

譬如:我封装的axios请求文件
只需要看步骤1、2、3、4

// request.js
import axios from 'axios'
import { Message } from 'element-ui'
// 1.还是需要引入vue-i18n插件
import VueI18n from 'vue-i18n'
// 2.定义中英文语言包
const messages = {
  en: {
    message: {
      connectionServerFailed: 'Connection to server failed'
    }
  },
  zh: {
    message: {
      connectionServerFailed: '连接服务器失败'
    }
  }
}

export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}
// 3.实例化一个i18n对象
const i18n = new VueI18n({
  locale: getLanguage(), // 语言标识
  messages: messages // 上面自己定义的语言包
})


// 创建axios实例
const service = axios.create({
  baseURL: process.env.url_api, // api 即在config下的index.js中设置proxy设置跨域配置的地址(dev开发的时候打开)
  timeout: 60 * 1000 // 请求超时时间设置
})

// request 拦截器
service.interceptors.request.use(
  config => {
    // 请求发送前的设置

    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果返回后端定义的code不是 1 ,就视为一个错误返回.
    if (res.success !== 1) {
      Message({
        message: res.errMsg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.errCode === 'err.token.outtime') { // token超时
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'Error')
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误'
          break
        case 401:
          error.message = '未授权,请登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器错误'
          break
        case 502:
          error.message = '网络错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网络超时'
          break
        default: error.message = `连接错误`
      }
    } else {
    // 4.在需要使用多语言的地方调用即可。
      error.message = i18n.tc('message.connectionServerFailed')
    }
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service
原创文章 103 获赞 128 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_42991509/article/details/105135725