devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue项目中的http.js（请求封装）_vue http.js

作者：IT小白 | 2024-05-07 10:02:51

赞

踩

vue http.js

第一个版本和第二个版本，感觉还行啊

第一个版本 

vue+vant 

  1. import axios from 'axios'
  2. import { Toast } from 'vant';
  3.  
  4. import store from '@/store/index.js'
  5. import router from '@/router'
  6. import {
  7.   getToken
  8. } from '@/libs/util'
  9.  
  10. const instance = axios.create({
  11.   timeout: 105000,
  12.   headers: {
  13.     'Content-Type': 'application/json; charset=utf-8'
  14.   }
  15. })
  16.  
  17. /**
  18.  * 请求拦截
  19.  */
  20. instance.interceptors.request.use(async config => {
  21.   if (getToken()) {
  22.     // 如果是CAS平台
  23.     // 在请求头部增加 切换的租户 字段（User-Information）发给后台
  24.     config.headers.Authorization = getToken()
  25.     // request.headers['Tenant_id'] = getCurrentTenantId()
  26.     config.headers['Tenant-ID'] = localStorage.getItem('tenantId')
  27.     if (config.url.indexOf('login') === -1 && config.url.indexOf('refreshToken') === -1 && config.url.indexOf('selectUnReadMessage') === -1) {
  28.       await store.dispatch('refreshToken')
  29.     }
  30.   }
  31.   return config
  32. }, error => {
  33.   return Promise.reject(error)
  34. })
  35.  
  36. /**
  37.  * 响应拦截
  38.  */
  39. instance.interceptors.response.use(response => {
  40.   if ((response.data.code === 'E0B00001' && response.data.data === 'E0B00002') || response.data.code == 401) {
  41.     //Toast(response.data.msg);
  42.     return router.replace({
  43.       name: 'transfer',
  44.     })
  45.   }
  46.   return Promise.resolve(response)
  47. }, error => {
  48.   if (error.response.status === 500 || error.response.status === 502) {
  49.     Toast(error.response.data.msg);
  50.   } else if (error.response.status == 401) {
  51.     //token失效
  52.     Toast(error.response.data.msg);
  53.     router.replace({
  54.       name: 'transfer',
  55.     })
  56.   } else if (error.response.status === 404) {
  57.     Toast('请求接口不存在' + error.response.status);
  58.   } else {
  59.     Toast(error.response.status);
  60.   }
  61.   return Promise.reject(error)
  62.  
  63. })
  64. const http = {
  65.   get: (path, data, config) =>
  66.     instance.get(path, {
  67.       params: data,
  68.       ...config
  69.     }),
  70.   post: (path, data, config) => instance.post(path, data, config),
  71.   put: (path, data, config) => instance.put(path, data, config),
  72.   delete: (path, data, config) =>
  73.     instance.delete(path, {
  74.       data,
  75.       ...config
  76.     })
  77. }
  78. export default http

第二个版本 

vue+element-ui 

  1. /*
  2.  * @Author: 梁观晖
  3.  * @Date: 2019-07-12 13:39:15
  4.  * @LastEditors: MoMaek 杨兴
  5.  * @LastEditTime: 2021-01-15 16:14:40
  6.  * @Description: no description
  7.  */
  8. import axios from 'axios'
  9. import router from '@/router'
  10.  
  11. import {
  12.   getToken
  13. } from '@/libs/util'
  14. // 2021年6月22日：统一ui框架为elementUI
  15. import {
  16.   Message,
  17.   Loading
  18. } from 'element-ui';
  19.  
  20. import store from '@/store/index.js'
  21. // import { mapActions, mapState } from 'vuex'
  22. const instance = axios.create({
  23.   // baseURL: baseUrl,
  24.   timeout: 105000,
  25.   // withCredentials: true,
  26.   headers: {
  27.     'Content-Type': 'application/json; charset=utf-8'
  28.   }
  29. })
  30.  
  31. let loadingInstance = null; // 记录页面中存在的loading
  32. let loadingCount = 0; // 记录当前正在请求的数量
  33.  
  34. function showLoading(data) {
  35.   if (loadingCount === 0) {
  36.     loadingInstance = Loading.service({
  37.       lock: true,
  38.       text: data || '加载中……'
  39.     });
  40.   }
  41.   loadingCount++
  42. };
  43.  
  44. function hideLoading() {
  45.   loadingCount--
  46.   if (loadingInstance && loadingCount === 0) {
  47.     loadingInstance.close()
  48.     loadingInstance = null
  49.   }
  50. }
  51.  
  52. // 这里的response包含每次请求的内容
  53. instance.interceptors.request.use(
  54.   async request => {
  55.     if (!request.loadingHide) {
  56.       showLoading(request.loadingText)
  57.     }
  58.     // 全局给header添加token
  59.     if (getToken()) {
  60.       // 如果是CAS平台
  61.       // 在请求头部增加 切换的租户 字段（User-Information）发给后台
  62.       request.headers.Authorization = getToken()
  63.       // request.headers['Tenant_id'] = getCurrentTenantId()
  64.       request.headers['Tenant-ID'] = localStorage.getItem('tenantId')
  65.       if (request.url.indexOf('login') === -1 && request.url.indexOf('refreshToken') === -1 && request.url.indexOf('selectUnReadMessage') === -1) {
  66.         await store.dispatch('refreshToken')
  67.       }
  68.     }
  69.     return request
  70.   },
  71.   error => {
  72.     return Promise.reject(error)
  73.   }
  74. )
  75.  
  76. // 拦截器
  77. instance.interceptors.response.use(
  78.   (response) => {
  79.     if (!response.config.loadingHide) {
  80.       hideLoading()
  81.     }
  82.  
  83.     // paas token失效
  84.     // || response.data.code == 401
  85.     if (response.data.code === 'E0B00001' && response.data.data === 'E0B00002') {
  86.       Message({
  87.         message: response.data.msg,
  88.         type: 'warning'
  89.       });
  90.       let timer = setTimeout(() => {
  91.         router.replace({
  92.           name: 'login',
  93.           params: {
  94.             clear: true
  95.           }
  96.         })
  97.         clearTimeout(timer)
  98.       }, 1000)
  99.       return
  100.     }
  101.     return response
  102.   },
  103.   (error) => {
  104.     if (!error.config.loadingHide) {
  105.       hideLoading()
  106.     }
  107.     if (error.response.status === 500 || error.response.status === 502) {
  108.       Message({
  109.         message: error.response.data.msg,
  110.         type: 'warning'
  111.       });
  112.     } else if (error.response.status === 404) {
  113.       Message({
  114.         message: '请求接口不存在' + error.response.status,
  115.         type: 'error'
  116.       });
  117.     } else if (error.response.status === 401) {
  118.       Message({
  119.         message: 'token失效，请重新登陆',
  120.         type: 'warning'
  121.       });
  122.       router.replace({
  123.         name: 'login',
  124.         params: {
  125.           clear: true
  126.         }
  127.  
  128.       })
  129.     } else {
  130.       Message({
  131.         message: error.response.status,
  132.         type: 'warning'
  133.       });
  134.     }
  135.  
  136.     return Promise.reject(error)
  137.   }
  138. )
  139.  
  140. const http = {
  141.   get: (path, data, config) =>
  142.     instance.get(path, {
  143.       params: data,
  144.       ...config
  145.     }),
  146.   post: (path, data, config) => instance.post(path, data, config),
  147.   put: (path, data, config) => instance.put(path, data, config),
  148.   delete: (path, data, config) =>
  149.     instance.delete(path, {
  150.       data,
  151.       ...config
  152.     })
  153. }
  154. export default http

第一个版本和第二个版本的使用，都是一样的，如下： 

 使用

①main.js中引用

  1. //main.js
  2. import http from "@/libs/request";
  3.  
  4. Vue.prototype.$http = http;

②vue文件中使用

  1. <template>
  2.   <div id="app">
  3.     <router-view></router-view>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   name: 'app',
  10.   components: {
  11.  
  12.   },
  13.   created() {
  14.     this.$http.post("/cmdb-base/instanceAsst/findAllInstanceAsstListApp", this.dataForm).then(({ data: res }) => {
  15.       if (res.code != "S1A00000") {
  16.         this.groupList = []
  17.         return this.$toast.fail(res.msg)
  18.       }
  19.       this.groupList = res.data || []
  20.     }).finally(() => {
  21.       this.dataLoading = false
  22.     })
  23.   }
  24.  
  25. }
  26. </script>
  27.  
  28. <style>
  29.  
  30. </style>

 ③ 其他js中的使用，比如vuex的store.js

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import HTTP from '@/libs/request'
  4. import sysConfig from './module/sysConfig'
  5. import {
  6.   setToken
  7. } from '@/libs/util'
  8. Vue.use(Vuex)
  9.  
  10. export default new Vuex.Store({
  11.   state: {
  12.  
  13.   },
  14.   getters: {
  15.  
  16.   },
  17.   mutations: {
  18.  
  19.   },
  20.   actions: {
  21.     
  22.     handleNewLogin({
  23.       state,
  24.       commit
  25.     }, {
  26.       type,
  27.       appSessionKey,
  28.       account,
  29.       pwd,
  30.       userType
  32.     }) {
  33.       return new Promise((resolve) => {
  34.         let url = ""
  35.         let method = ""
  36.         let params = null
  37.         if (type === 'local') {
  38.           url = '/cmdb-rbac/v1/sysLogin/login'
  39.           method = 'post'
  40.           params = {
  41.             account: account.trim(),
  42.             pwd: pwd,
  43.             userType
  44.           }
  45.         } else {
  46.           url = '/base-auth/oauth/login'
  47.           method = 'get'
  48.           params = {
  49.             [state.sysConfig.sso.appSessionKey]: appSessionKey,
  50.             // [state.sysConfig.sso.redirectKey]: state.sysConfig.sso.redirectValue
  51.           }
  52.         }
  53.        
  54.         HTTP[method](url, params).then(({ data: res }) => {
  55.           if (res.code !== 'S1A00000') {
  56.             resolve(res)
  57.             return
  58.           }
  59.           setToken(res.data.token)
  60.           localStorage.setItem('tenantId', res.data.userInfo.user.tenantId)
  61.           localStorage.setItem('expireTime', res.data.expireTime)
  62.           resolve(res)
  63.         })
  64.           .catch((err) => {
  65.             resolve({
  66.               code: 'E0B00001',
  67.               'msg': err.message
  68.             })
  69.           }).finally(() => {
  70.           })
  71.       })
  72.     },
  73.   
  74.   },
  75.   modules: {
  76.     sysConfig
  77.   }
  78.   // plugins: [persistedState()]
  79. })

第三个版本

  1.  
  2. import axios from 'axios'
  3. import { message } from 'ant-design-vue'
  4. import Cookie from 'js-cookie'
  5.  
  6. let isFormData = (v) => {
  7.   return Object.prototype.toString.call(v) === '[object FormData]';
  8. }
  9. axios.defaults.timeout = 10000
  10. // axios.defaults.withCredentials = true
  11. axios.defaults.crossDomain = true
  12. let sessions = {}
  13. //http request 拦截器
  14. axios.interceptors.request.use(
  15.   config => {
  16.     if (!isFormData(config.data)) {
  17.       config.data = JSON.stringify(config.data)
  18.     }
  19.     const jwt = Cookie.get('jwt');
  20.     const sessions = Cookie.get('sessions') ? JSON.parse(Cookie.get('sessions')) : {}
  21.     // 判断是否是登录请求
  22.     // true
  23.     if (config.url.indexOf('admin-user/login') > -1) {
  24.       config.headers = {
  25.         'Content-Type': 'application/json;charset=UTF-8',
  26.       }
  27.     } else {
  28.       // false
  29.       // 判断是否有登录token
  30.       if (jwt) {
  31.         if (isFormData(config.data)) {
  32.           config.headers = {
  33.             "Content-Type": "multipart/form-data",
  34.             'Authorization': jwt,
  35.             ...sessions
  36.           }
  37.         } else {
  38.           config.headers = {
  39.             'Content-Type': 'application/json;charset=UTF-8',
  40.             'Authorization': jwt,
  41.             ...sessions
  42.           }
  43.         }
  44.  
  45.       } else {
  46.         if (isFormData(config.data)) {
  47.           config.headers = {
  48.             "Content-Type": "multipart/form-data",
  49.             ...sessions
  50.           }
  51.         } else {
  52.           config.headers = {
  53.             'Content-Type': 'application/json;charset=UTF-8',
  54.             ...sessions
  55.           }
  56.         }
  57.  
  58.       }
  59.     }
  60.     return config;
  61.   },
  62.   error => {
  63.     return Promise.reject(error);
  64.   }
  65. )
  66. //http response 拦截器
  67. axios.interceptors.response.use(
  68.   response => {
  69.     // console.log('success',response)
  70.     response.headers.Authorization && Cookie.set('jwt', 'Bearer ' + response.headers.Authorization, { expires: 7 })
  71.     return response;
  72.   },
  73.   err => {
  74.     console.log('fail', err.response)
  75.     console.log('fail', err)
  76.     if (err && err.response) {
  77.       switch (err.response.status) {
  78.         case 400:
  79.           err.message = '请求错误'
  80.           break
  81.  
  82.         case 401:
  83.           break
  84.         case 403:
  85.           err.message = '登录过期，请重新登录'
  86.           break
  87.         case 404:
  88.           err.message = '网络请求不存在'
  89.           break
  90.         case 408:
  91.           break
  92.         case 500:
  93.           err.message = '请求错误'
  94.           break
  95.         case 501:
  96.           err.message = '服务未实现'
  97.           break
  98.  
  99.         case 502:
  100.           err.message = '网关错误'
  101.           break
  102.  
  103.         case 503:
  104.           err.message = '服务不可用'
  105.           break
  106.  
  107.         case 504:
  108.           err.message = '网关超时'
  109.           break
  110.  
  111.         case 505:
  112.           err.message = 'HTTP版本不受支持'
  113.           break
  114.  
  115.         default:
  116.       }
  117.     } else {
  118.       err.message = '网络出现问题，请稍后再试'
  119.     }
  120.     message.error(err.message);
  121.     return Promise.reject(err)
  122.   }
  123. )
  124.  
  125.  
  126.  
  127. /**
  128.  * get请求
  129.  * @param url
  130.  * @param params
  131.  * @returns {Promise}
  132.  */
  133.  
  134. export function get(url, params = {}) {
  135.   sessions = Cookie.get('sessions') ? JSON.parse(Cookie.get('sessions')) : {}
  136.   return new Promise((resolve, reject) => {
  137.     axios.get(Util.baseUrl + url, {
  138.       params: params
  139.     })
  140.       .then(response => {
  141.         // 请求成功
  142.         resolve(response.data)
  143.       })
  144.       .catch(err => {
  145.         reject(err)
  146.       })
  147.   })
  148. }
  149.  
  150. /**
  151.  * post请求
  152.  * @param url
  153.  * @param data
  154.  * @returns {Promise}
  155.  */
  156.  
  157. export function post(url, data = {}) {
  158.   return new Promise((resolve, reject) => {
  159.     axios.post(Util.baseUrl + url, data)
  160.       .then(response => {
  161.         // 请求成功
  162.         resolve(response.data)
  163.       })
  164.       .catch(err => {
  165.         reject(err)
  166.       })
  167.   })
  168. }
  169. /**
  170.  * post请求 params
  171.  * @param url
  172.  * @param data
  173.  * @returns {Promise}
  174.  */
  175.  
  176. export function postParams(url, params = {}, data = {}) {
  177.   return new Promise((resolve, reject) => {
  178.     axios({
  179.       method: 'post',
  180.       url: Util.baseUrl + url,
  181.       params: params,
  182.       body: data
  183.     })
  184.       .then(response => {
  185.         console.log(response)
  186.         // 请求成功
  187.         resolve(response.data)
  188.       })
  189.       .catch(err => {
  190.         reject(err)
  191.       })
  192.   })
  193. }
  194. /**
  195.  * 文件上传 uploadFile(使用post请求)
  196.  * @param url
  197.  * @param data
  198.  * @returns {Promise}
  199.  * @param 不需要传passportId
  200.  *
  201.  *$$$$$$参数module取值参考如下$$$$$$$$$
  203.  *运营中心服务【租户、秘钥】  【20010】
  204.   'spm-operation'
  206.  *统一组织机构服务[组织、部门等] 【20020】
  207.   'spm-org-structure'
  209.  *权限管理服务[资源菜单、角色、用户等] 【20030】
  210.   'spm-admin'
  212.  *账号信息服务[统一账号、账户管理] 【20040】
  213.  'spm-passport'
  215.  *统一鉴权中心服务[Token管理、认证、刷新] 【20050】
  216.  'spm-auth-server'
  218.  *应用中心服务[应用注册] 【20060】
  219.  'spm-app-center'
  221.  *第三方服务【提供短信、消息推送】 【20070】
  222.   'spm-third-party'
  224.  *系统服务（基础数据、版本、服务等） 【20080】
  225.   'spm-system'
  227.  *文件服务[文件/图片上传下载/处理等功能] 【20090】
  228.   'spm-file-upload'
  230.  *即时通讯信息服务[im管理] 【20100】
  231.   'spm-im'
  233.  *日志监控服务logstash  【20110】
  234.   'spm-logstash'
  235.  */
  236. export function uploadFile(data = {}) {
  237.   return new Promise((resolve, reject) => {
  238.     //固定参数
  239.     const fixedParams = {
  240.       appId: 'spm',
  241.       appName: 'spm',
  242.     }
  243.     //合并参数
  244.     let params = { ...fixedParams, ...data }
  245.     //创建formData 并赋值
  246.     let formData = new FormData();
  247.     for (let key in params) {
  248.       formData.append(key, params[key])
  249.     }
  250.     //请求后台
  251.     axios({
  252.       method: 'post',
  253.       url: 'http://39.105.163.75:20090/V1.0.0/api/file/upload',
  254.       data: formData,
  255.     })
  256.       .then(response => {
  257.         // 请求成功
  258.         resolve(response.data)
  259.       })
  260.       .catch(err => {
  261.         reject(err)
  262.       })
  263.   })
  264. }
  265.  
  266. export function uploadImg(data = {}) {
  267.   return new Promise((resolve, reject) => {
  268.  
  269.     //请求后台
  270.     axios({
  271.       method: 'post',
  272.       url: 'http://39.105.163.75:20090/V1.0.0/api/file/upload',
  273.       data: data,
  274.     })
  275.       .then(response => {
  276.         // 请求成功
  277.         resolve(response.data)
  278.       })
  279.       .catch(err => {
  280.         reject(err)
  281.       })
  282.   })
  283. }
  284. export function exportFile(url, data = {}) {
  285.   return new Promise((resolve, reject) => {
  286.     axios({
  287.       method: "post",
  288.       url: Util.baseUrl + url,
  289.       data: data,
  290.       responseType: 'arraybuffer'
  291.     })
  292.       .then(response => {
  293.         // 请求成功
  294.         resolve(response.data)
  295.       })
  296.       .catch(err => {
  297.         reject(err)
  298.       })
  299.   })
  300. }
  301.  
  302. /**
  303.  * 并发请求
  304.  * @param requestLists
  305.  * @returns {Promise<any>}
  306.  */
  307. export function getAll(requestLists = []) {
  308.   let counter = 1 // 请求次数
  309.   let maxRequestTimes = 5 // 最大请求次数，因为有可能别个页面就是访问不了，请求多少次也没用- -
  310.   let result = [] // 最后的结果
  311.   let failedList = []
  312.   return new Promise((resolve, reject) => {
  313.     axios.all(requestLists)
  314.       .then(response => {
  315.         result = result.concat(response.filter(i => i)) // filter返回true的时候保留该数组项，因为getDataById的catch里没有给返回值（这里也不需要），这里的resolve里就会有undefined，需要过滤掉
  316.         let failedLength = failedList.length
  317.         if (failedLength > 0 && counter < maxRequestTimes) { // 如果失败列表里有请求，并且请求次数不超过设定的值，就进行下一次请求，并且打出log
  318.           console.log(`第${counter}次请求完成，其中成功${requestLists.length - failedLength}个，失败${failedLength}个，正在进行第${++counter}次请求...`)
  319.           getAll(failedList)
  320.           failedList = [] // 这里要清空failedList，不然会一直调用。不用担心，下一次请求失败的会在getAll填充到failedList里。
  321.         } else { // 表示所有请求都成功了，或者达到了最大请求次数。到这里就可以对result做进一步处理了。
  322.           console.log(`请求完成，共请求${counter}次, 其中成功${requestLists.length - failedLength}个，失败${failedLength}个\n`, result)
  323.           counter = 1
  324.           resolve(response)
  325.         }
  326.       })
  327.       .catch(err => {
  328.         reject(err)
  329.       })
  330.   })
  331. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/548622
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号