request.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. // src/utils/request.js
  2. // 该文件是用来 二次 封装 axios 用的
  3. import axios from 'axios'
  4. import router from '@/router/index.js'
  5. // 开发环境(写代码的阶段) development
  6. // 生产环境(代码已经写好已经部署到服务器了) production
  7. // 测试环境(代码已经写好了但是还没有部署) production
  8. // process.env.NODE_ENV 用来获取我们当前的环境
  9. const isDev = process.env.NODE_ENV == 'development'
  10. // 修正赋值逻辑,使用逻辑或运算符
  11. const BASE_URL = import.meta.env.VITE_BASE_URL || 'http://192.168.110.8:8080/admin-api'
  12. // 创建一个请求对象
  13. const request = axios.create({
  14. // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  15. // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  16. // baseURL: isDev ? 'http://121.89.205.189:3000/admin' : 'http://121.89.205.189:3000/admin',
  17. baseURL: BASE_URL,
  18. // baseURL: '/api',
  19. // `timeout` 指定请求超时的毫秒数。
  20. // 如果请求时间超过 `timeout` 的值,则请求会被中断
  21. timeout: 60000, // 默认值是 `0` (永不超时)
  22. })
  23. // 添加请求拦截器
  24. request.interceptors.request.use(function (config) {
  25. // 在发送请求之前做些什么
  26. // console.log(localStorage.getItem('token'));
  27. // 1. 先获取 token
  28. const token = localStorage.getItem('token')
  29. // 2. 设置 token
  30. config.headers.token = token
  31. return config;
  32. }, function (error) {
  33. // 对请求错误做些什么
  34. return Promise.reject(error);
  35. });
  36. // 添加响应拦截器
  37. request.interceptors.response.use(function (response) {
  38. // 2xx 范围内的状态码都会触发该函数。
  39. // 对响应数据做点什么
  40. if (response.data.code == '401') {
  41. // token 无效,之后我们可以重新登录
  42. localStorage.clear()
  43. router.push('/login')
  44. }
  45. return response.data;
  46. }, function (error) {
  47. // 超出 2xx 范围的状态码都会触发该函数。
  48. // 对响应错误做点什么
  49. return Promise.reject(error);
  50. });
  51. // ajax 自定义各种数据请求的方法
  52. export default function ajax (config) {
  53. // 1. 先获取到请求的一些必要参数
  54. const { url = '', method = 'GET', data = {}, headers = {} } = config
  55. // 2. 判断我们请求的类型是 get 还是 post 还是其他
  56. switch (method.toUpperCase()) {
  57. case 'GET':
  58. // get 请求
  59. if (headers['content-type'] == 'application/x-www-form-url-encoded') {
  60. // 如果提交的是表单数据我们需要格式化数据
  61. const obj = new URLSearchParams()
  62. for (const key in data) {
  63. obj.append(key, data[key])
  64. }
  65. return request.post(url, obj, { headers })
  66. }
  67. // get 请求的参数我们需要放在 params 中
  68. return request.get(url, { params: data })
  69. case 'POST':
  70. // post 请求
  71. // 1. 表单提交数据
  72. if (headers['content-type'] == 'application/x-www-form-url-encoded') {
  73. // 如果提交的是表单数据我们需要格式化数据
  74. const obj = new URLSearchParams()
  75. for (const key in data) {
  76. obj.append(key, data[key])
  77. }
  78. return request.post(url, obj, { headers })
  79. }
  80. // 2. 文件数据
  81. if (headers['content-type'] == 'multipart/form-data') {
  82. const obj = new FormData()
  83. for (const key in data) {
  84. obj.append(key, data[key])
  85. }
  86. return request.post(url, obj, { headers })
  87. }
  88. // 3. json 数据
  89. return request.post(url, data, {headers})
  90. case 'PUT':
  91. // 通常用来修改数据用的 --- 数据更新
  92. return request.put(url, data)
  93. case 'DELETE':
  94. // 删除数据
  95. return request.delete(url, { data })
  96. case 'PATCH':
  97. // 更新局部资源
  98. return request.patch(url, data)
  99. default:
  100. // 如果前面全部都不是
  101. return request.request(config)
  102. }
  103. }