vue3.0+axios 跨域+封装

封装： 

　目录结构：src/utils/request.js， 没有就自己建一个

 

// import axios from 'axios'
// import { Message } from 'element-ui'

import router from '@/router/index'
import i18n from '@/i18n/i18n.js'
import store from '@/store/index'
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
const service = axios.create({
  baseURL: '',
  // 超时
  timeout: 30000
})
// request拦截器
service.interceptors.request.use(
  config => {
    const autelToken = localStorage.getItem('token')
    if (autelToken) {
      config.headers['autel-token'] = autelToken
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  res => {
    if (res.data.code !== 200) {
      if (res.data.code === 10005002) {
        ELEMENT.Message.info('您的账号在别处登录了, 请重新登陆')
        localStorage.removeItem('token')
        router.replace('/login')
      } else if (res.data.code === 10005001) {
        ELEMENT.Message.info('登陆已失效, 请重新登陆')
        localStorage.removeItem('token')
        router.replace('/login')
      } else {
        // 利用 i18 插件，获得当前语言环境，去对应字段里取得业务码对应的报错
        const lang = i18n.locale
        const errorMessage = i18n.messages[lang].errorCode.succeedCode[
          res.data.code.toString()
        ]
          ? i18n.messages[lang].errorCode.succeedCode[res.data.code.toString()]
          : res.data.message
        ELEMENT.Message({
          message: errorMessage,
          type: 'error'
        })
        // 如果本次请求的code 不是200，证明请求数据失败，本次不缓存页面，以便下次进入页面再次请求数据
        store.dispatch('tagsView/deletaCachedView', router.currentRoute.name)
      }
    }
    return res.data
  },
  error => {
    if (!error.response) {
      ELEMENT.Message({
        message: '服务器连接超时',
        type: 'error'
      })
      store.dispatch('tagsView/deletaCachedView', router.currentRoute.name)
      return
    }
    if (error.response.status === 401) {
      ELEMENT.Message.info('身份验证失败，请重新登陆')
      localStorage.removeItem('token')
      router.replace('/login')
      return error.response
    }
    // 利用 i18 插件，获得当前语言环境，去对应字段里取得业务码对应的报错
    const lang = i18n.locale
    const errorMessage = i18n.messages[lang].errorCode.statusCode[
      error.response.status.toString()
    ]
      ? i18n.messages[lang].errorCode.statusCode[
          error.response.status.toString()
        ]
      : '未知错误'
    ELEMENT.Message({
      message: errorMessage,
      type: 'error'
    })
    // 如果本次请求的状态码 不是200，证明请求数据失败，本次不缓存页面，以便下次进入页面再次请求数据
    store.dispatch('tagsView/deletaCachedView', router.currentRoute.name)
    return error
  }
)

export default service

　　

　　

　　

　　

跨域， 在 vue.config.js　里配置

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://autel-cloud-xxxx-dev.com',
        changeOrigin: true
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@API', resolve('src/api'))
      .set('@C', resolve('src/components'))
      .set('@U', resolve('src/utils'))
      .set('@V', resolve('src/views'))
      .set('@ATS', resolve('src/assets'))
  }
}

　　

　　

　使用

　　　　src/api/menu.js

import request from '@/utils/request'

//添加菜单
export function addOrCompileMenu(data) {
  return request({
    url: '/api/admin/menu/saveMenu',
    method: 'post',
    applicationType: 'JSON',  //这一段表示，是post 请求，就将 请求参数转换成 JSON 格式
    data
  })
}

　　src/views/menu.vue

import { getMenuList } from '@/api/menu'
methods: {
   getMenuList({}).then(res => {
        if (res.status === 200) {
          this.list = res.data.data.menuVoList
        }
      })
}