老师,通过封装axios请求,网络查看请求成功,但是却没有返回data,而是走到非200和非40001的逻辑来了,这个是哪里问题呢?

来源:2-10 axios二次封装(下)

qq_阳光男孩_15

2022-03-17

http://img.mukewang.com/szimg/6232f0a1094330a318250846.jpg

config的js如下:
// 环境配置封装
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
  dev: {
    baseApi: '/api',
    mockApi: 'https://www.fastmock.site/mock/b0a220ea6df5a79fc0573243c45162a0/api'
  },
  test: {
    baseApi: '/api',
    mockApi: 'https://www.fastmock.site/mock/b0a220ea6df5a79fc0573243c45162a0/api'
  },
  prod: {
    baseApi: '/api',
    mockApi: 'https://www.fastmock.site/mock/b0a220ea6df5a79fc0573243c45162a0/api'
  }
}
export default {
  env,
  mock: true,
  ...EnvConfig[env]
}
request的js如下:
/**
 * axios 二次封装
 */
import axios from 'axios'
import config from './../config'
import router from './../router'
import {ElMessage} from 'element-plus'

const TOKEN_INVALID = 'Token认证失败,请重新登录'
const NETWORK_ERROR = '网络请求异常,请稍后重试'

// 创建axios实例对象,添加全局配置
const service = axios.create({
  baseURL: config.baseApi,
  timeout: 8000
})

// 请求拦截
service.interceptors.request.use((req) => {
  // To-Do
  const headers = req.headers
  if(!headers.Authorization) headers.Authorization = 'Bear Jack'
  return req
})

// 响应拦截
service.interceptors.response.use((res) => {
  const { code, data, msg } = res.data
  if(code === 200) {
    return data
  }else if(code === 40001){
    ElMessage.error(TOKEN_INVALID)
    setTimeout(()=>{
      router.push('/login')
    }, 1500)
    return Promise.reject(TOKEN_INVALID)
  }else {
    ElMessage.error(msg || NETWORK_ERROR)
    return Promise.reject(msg || NETWORK_ERROR)

  }
})

/**
 * 请求核心函数
 * @param {*} options 请求配置
 */
function request(options) {
  options.method = options.method || 'get'
  if(options.method.toLowerCase() === 'get') {
    options.params = options.data
  }

  if(config.env === 'prod') {
    service.defaults.baseURL = config.baseApi
  }else {
    service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
  }
  return service(options)
}

export default request


写回答

1回答

qq_阳光男孩_15

提问者

2022-03-17

老师后面有解答,心急了;debugger定位问题是真的好用!

0
0

Vue3+ElementPlus+Koa2 全栈开发后台系统

从前端晋级到全栈,让你的未来发展有更多可能

1069 学习 · 580 问题

查看课程