Vue+iView LoadingBar封装Axios请求

痛定思痛。 2022-01-31 20:01 491阅读 0赞
  1. import Axios from 'axios'
  2. import qs from 'qs'
  3. import iView from 'iview'
  4. Axios.defaults.timeout = 60000
  5. Axios.defaults.baseURL = ''
  6. //http request 拦截器
  7. Axios.interceptors.request.use(
  8. config => {
  9. if(config.method === 'post') {
  10. config.data = qs.stringify(config.data);
  11. config.headers = {
  12. 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  13. }
  14. } else if(config.method === 'get') {
  15. let newParams = {}
  16. for(let key in config.params) {
  17. newParams[key] = encodeURIComponent(config.params[key])
  18. }
  19. config.params = newParams
  20. config.headers = {
  21. 'Content-Type': 'application/json;charset=UTF-8'
  22. }
  23. }
  24. //开始显示LoadingBar
  25. iView.LoadingBar.start();
  26. return config
  27. },
  28. error => {
  29. //失败显示LoadingBar
  30. iView.LoadingBar.error();
  31. return Promise.reject(error)
  32. }
  33. )
  34. //http response 拦截器
  35. Axios.interceptors.response.use(
  36. response => {
  37. let data = response.data
  38. if(data.successFlag === 1) {
  39. //关闭显示LoadingBar
  40. iView.LoadingBar.finish();
  41. return Promise.resolve(data)
  42. } else {
  43. iView.LoadingBar.error();
  44. return Promise.reject(data)
  45. }
  46. },
  47. error => {
  48. iView.LoadingBar.error();
  49. return Promise.reject(error)
  50. }
  51. )
  52. /**
  53. * 封装get方法
  54. * @param url
  55. * @param data
  56. * @returns {Promise}
  57. */
  58. const get = function get(url, params = {}) {
  59. return new Promise((resolve, reject) => {
  60. Axios.get(url, {
  61. params: params
  62. })
  63. .then(response => {
  64. resolve(response);
  65. })
  66. .catch(err => {
  67. reject(err)
  68. })
  69. })
  70. }
  71. /**
  72. * 封装post请求
  73. * @param url
  74. * @param params
  75. * @returns {Promise}
  76. */
  77. const post = function post(url, params = {}) {
  78. return new Promise((resolve, reject) => {
  79. Axios.post(url, params)
  80. .then(response => {
  81. resolve(response);
  82. }, err => {
  83. reject(err)
  84. })
  85. })
  86. }
  87. /**
  88. * 封装patch请求
  89. * @param url
  90. * @param data
  91. * @returns {Promise}
  92. */
  93. const patch = function patch(url, data = {}) {
  94. return new Promise((resolve, reject) => {
  95. Axios.patch(url, data)
  96. .then(response => {
  97. resolve(response);
  98. }, err => {
  99. reject(err)
  100. })
  101. })
  102. }
  103. /**
  104. * 封装put请求
  105. * @param url
  106. * @param data
  107. * @returns {Promise}
  108. */
  109. const put = function put(url, data = {}) {
  110. return new Promise((resolve, reject) => {
  111. Axios.put(url, data)
  112. .then(response => {
  113. resolve(response);
  114. }, err => {
  115. reject(err)
  116. })
  117. })
  118. }
  119. export default {
  120. post,
  121. get,
  122. patch,
  123. put
  124. }

发表评论

表情:
评论列表 (有 0 条评论,491人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue-封装axios请求

    最近接手新的vue项目,发现axios竟然没有封装,立马动手封装,这里记录一下完整的封装过程,废话不说,直接上代码 baseConfig.js文件 //存放各个服

    相关 封装 axios 取消重复请求

    编者按:本文作者舒丽琦,奇舞团前端开发工程师 在我们web开发过程中,很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文。