vite热更新时,页面自动http请求报错的问题

描述

vite + axios

页面修改代码后, vite进行热更新, 当onMounted中进行了http请求, 请求时报错

原因

封装axios时, 设置响应拦截器, 当返回了res.data时, 下一次热更新时, 进入响应拦截器的对象就是res.data对象, 而非res对象

axios.interceptors.response.use(
  (res: AxiosResponse<any, any>) => {
    return new Promise((resolve, reject) => {
      // 状态码判断....

      return resolve(res)
      // return resolve(res.data)		// 返回res.data会导致热更新后接口请求报错
    })
  },
	(error) => {
    console.error('>>> response error', error)
    // 响应码判断....
   
    return Promise.reject(error)
  }
)

解决

axios响应拦截器中直接返还res对象

在调用api函数后就需要多一层解析过程

可以再封装一个请求对象, 函数中返还res.data, 示例:

const http = {
  get(url, params) {
    return new Promise((resolve, reject) => {
      NProgress.start()
      axios
        .get(url, { params })
        .then((res) => {
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
          NProgress.done()
          reject(err)
        })
    })
  },
  post(url, params) {
    return new Promise((resolve, reject) => {
      NProgress.start()
      axios
        .post(url, params)
        .then((res) => {
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
          NProgress.done()
          reject(err)
        })
    })
  },
  put(url, params, removeId = true) {
    // 移除params中的ID字段
    if (removeId && params.id) {
      params.id = undefined
    }
    return new Promise((resolve, reject) => {
      NProgress.start()	// 进度条插件, 可以删除
      axios
        .put(url, params)
        .then((res) => {
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
          NProgress.done()
          reject(err)
        })
    })
  },
  delete(url) {
    return new Promise((resolve, reject) => {
      NProgress.start()
      axios
        .delete(url)
        .then((res) => {
          NProgress.done()
          resolve(res.data)
        })
        .catch((err) => {
          NProgress.done()
          reject(err)
        })
    })
  },
}

// 使用
const api = {
  // 登录
  login: (params) => http.post('/api/v1/base/login', params),
}

api.login({...参数}).then((resData) => {})