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
        }
      })
}