通用vue api配置

最新推荐文章于 2024-02-29 21:02:13 发布

帷帆

最新推荐文章于 2024-02-29 21:02:13 发布

阅读量375

点赞数

分类专栏：工作记录文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_53876100/article/details/119914168

版权

工作记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了在Vue项目中如何配置和使用Axios库，包括设置超时时间、请求头、错误处理等。通过定义自定义错误类AjaxError并设置请求和响应拦截器来实现统一的错误提示。此外，还展示了如何根据环境变量动态配置API的基础URL。

摘要由CSDN通过智能技术生成

同时做了内部框架waltz的适配

index.js

import Vue from 'vue'
import axios from 'axios'
import { baseURL, sdpURLS, rhURLS, sdpRhURLS } from './base'

class AjaxError extends Error {
  constructor(message, code = ERROR.UNKNOW.code) {
    super(message)
    this.code = code
  }
}

axios.defaults.timeout = 30000
axios.defaults.headers = {
  'Content-type': 'application/json;charset=UTF-8'
}

const ERROR = {
  UNKNOW: {
    code: 5,
    prompt: '发生未知错误'
  },
  UNAUTHORIZED: {
    code: 6,
    prompt: '令牌已过期'
  },
  SERVER: {
    code: 2,
    prompt: '系统异常'
  },
  NOT_FOUND: {
    code: 9,
    prompt: '未找到相应的接口'
  },
  TIMEOUT: {
    code: 1,
    prompt: '请求超时'
  },
  NO_RESPONSE: {
    code: 4,
    prompt: '网络请求异常'
  }
}

//  请求拦截器
axios.interceptors.request.use(config => {
  config.headers['Lapp-Version'] = process.env.VUE_APP_VERSION
  return config
}, err => {
  return Promise.reject(err)
})

//  响应拦截器
axios.interceptors.response.use(
  res => {
    return res.data
  },
  err => {
    let { prompt, code } = ERROR.UNKNOW
    if (err.response) {
      let { status } = err.response
      if (status === 401) {
        ({ prompt, code } = ERROR.UNAUTHORIZED)
      } else if (status === 403) {
        ({ prompt, code } = ERROR.SERVER)
      } else if (status === 404) {
        ({ prompt, code } = ERROR.NOT_FOUND)
      } else if (status === 408) {
        ({ prompt, code } = ERROR.TIMEOUT)
      } else if (status >= 500) {
        ({ prompt, code } = ERROR.SERVER)
      }
    } else {
      ({ prompt, code } = ERROR.NO_RESPONSE)
    }
    // Vue.$toast.warn(prompt)
    return Promise.reject(new AjaxError(prompt, code))
  })
const api = {
  // recordClick: data => axios.post(`${baseURL}/gm-api/v4/home/used`, data),
  // common: data => axios.get(`${baseURL}/gm-api/v4/apps`, { params: data }),
}

export default api

base.js

const appEnv = 'browser'
console.log(`AppEnv: ${appEnv}`)

console.log(process.env.VUE_APP_URL_SUFFIX)

const URL_SUFFIX = process.env.VUE_APP_URL_SUFFIX || '8085'
console.log(`URL_SUFFIX: ${URL_SUFFIX ? URL_SUFFIX : 'null'}`)

// API 配置
const URLS = {
  browser: '/api',
  develop: `https://gw-di1.sit.cmft.com${URL_SUFFIX}`,
  sit: `https://gw-st1.uat.cmft.com${URL_SUFFIX}`,
  production: ''
}
const baseURL = URLS[appEnv]

export {
  baseURL
}