request.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import axios from "axios";
  2. import { Message } from "element-ui";
  3. import router from "../router";
  4. import { stage } from "./config";
  5. import QS from "qs";
  6. // 响应拦截器
  7. axios.interceptors.response.use(
  8. (response) => {
  9. // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
  10. // 否则的话抛出错误
  11. if (response.status === 200) {
  12. return Promise.resolve(response);
  13. } else {
  14. return Promise.reject(response);
  15. }
  16. },
  17. // 服务器状态码不是2开头的的情况
  18. // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  19. // 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
  20. // 下面列举几个常见的操作,其他需求可自行扩展
  21. (error) => {
  22. if (error.response.status) {
  23. switch (error.response.status) {
  24. // 401: 未登录
  25. // 未登录则跳转登录页面,并携带当前页面的路径
  26. // 在登录成功后返回当前页面,这一步需要在登录页操作。
  27. case 401:
  28. router.replace({
  29. path: "/login",
  30. query: {
  31. redirect: router.currentRoute.fullPath,
  32. },
  33. });
  34. break;
  35. // 403 token过期
  36. // 登录过期对用户进行提示
  37. // 清除本地token和清空vuex中token对象
  38. // 跳转登录页面
  39. case 403:
  40. router({
  41. message: "登录过期,请重新登录",
  42. duration: 1000,
  43. // forbidClick: true,
  44. });
  45. // const store = useCounterStore();
  46. // 清除token
  47. localStorage.removeItem("token");
  48. // store.increment();
  49. // store.commit("loginSuccess", null);
  50. // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
  51. setTimeout(() => {
  52. router.replace({
  53. path: "/login",
  54. query: {
  55. redirect: router.currentRoute.fullPath,
  56. },
  57. });
  58. }, 1000);
  59. break;
  60. // 404请求不存在
  61. case 404:
  62. Message({
  63. message: "网络请求不存在",
  64. duration: 1500,
  65. // forbidClick: true,
  66. });
  67. break;
  68. // 其他错误,直接抛出错误提示
  69. default:
  70. Message({
  71. message: error.response.data.message,
  72. duration: 1500,
  73. // forbidClick: true,
  74. });
  75. }
  76. return Promise.reject(error.response);
  77. }
  78. }
  79. );
  80. // 请求超时时间
  81. axios.defaults.timeout = 10000;
  82. // post请求头
  83. axios.defaults.headers.post["Content-Type"] =
  84. "application/x-www-form-urlencoded;charset=UTF-8";
  85. axios.defaults.baseURL = stage.path;
  86. /**
  87. * get方法,对应get请求
  88. * @param {String} url [请求的url地址]
  89. * @param {Object} params [请求时携带的参数]
  90. */
  91. export function get(url, params) {
  92. return new Promise((resolve, reject) => {
  93. axios
  94. .get(url, {
  95. params: params,
  96. })
  97. .then((res) => {
  98. resolve(res.data);
  99. })
  100. .catch((err) => {
  101. reject(err.data);
  102. });
  103. });
  104. }
  105. /**
  106. * post方法,对应post请求
  107. * @param {String} url [请求的url地址]
  108. * @param data
  109. * @param headers
  110. */
  111. export function post(url, data, headers) {
  112. return new Promise((resolve, reject) => {
  113. axios
  114. .post(url, data, {
  115. headers: {
  116. "Content-Type": "application/json",
  117. ...headers,
  118. },
  119. })
  120. .then((res) => {
  121. resolve(res.data);
  122. })
  123. .catch((err) => {
  124. reject(err.data);
  125. });
  126. });
  127. }
  128. export function upload(url, formData) {
  129. return new Promise((resolve, reject) => {
  130. axios
  131. .post(url, formData)
  132. .then((res) => {
  133. resolve(res.data);
  134. })
  135. .catch((err) => {
  136. reject(err.data);
  137. });
  138. });
  139. }