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

axios的封装_axios封装

作者：小蓝xlanll | 2024-04-18 13:35:25

赞

踩

axios封装

在vue项目中我们一般会使用axios来实现前后端的交互，下面是常用的axios封装，包括了请求头、状态码、请求超时时间、请求方式、请求拦截器和响应拦截器等的封装：

首先需要先安装axios,使用如下命令：

  1.  
  2. npm install axios

我们一般会在src目录下新建一个文件夹api,然后在此文件夹下创建一个request.js文件，对axios的封装代码就写在request.js文件中，目录结果见下图

主要内容拆解：

1.请求超时时间设置，可根据实际项目需求而定

  1. const request = axios.create({
  2.   baseURL: '',
  3.   timeout: 60000, //改成60s
  4. })

 2.添加请求拦截器--（由于项目中有使用到上传和导入功能，参数与一般请求有区别，这里做了分类处理，如果不需要对参数做处理的，可以去掉type==='upload'的判断部分代码）

  1. request.interceptors.request.use(
  2.   (config) => {
  3.     config.data = config.data || ''
  4.     const { data, type, basic } = config.data
  5.     if ( process.env.NODE_ENV === 'development' ) {
  6.       config.url = `${config.baseUrl || '/api'}${config.url}`
  7.     } else {
  8.       config.url = `${config.url}`
  9.     }
  10.     if (data && basic) return config //如果传参时有传 basic 则不需要再加一次basic
  11.     if (config.url !== '/login') {   // 判断请求是否是登录接口
  12.       config.headers.token = localStorage.getItem('token') // 如果不是登录接口，就给请求头里面设置token
  13.     }
  14.     config.data = type === 'upload' ? data : formatParams(config.data)
  15.     return config // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
  16.   },
  17.   (error) => {
  18.     return Promise.reject(error)
  19.   }
  20. )

其中basic中包括token、ver(版本号）、time(时间戳)等公共的接口参数，一般我们会在src下的utils文件夹中创建一个basic.js的文件，代码如下：

  1. import MD5 from 'js-md5'
  2. import SHA512 from './secret/sha512' // sha512加密
  3. import { getToken } from '@/utils/auth.js'
  4.  
  5. /**
  6.  * 生成32位随机正整数 0~2147483647 (2^32)
  7.  */
  8. export const getNonce = () => Math.floor(Math.random() * 2147483646 + 1)
  9.  
  10. /**
  11.  * 生成basic数据
  12.  * @param ver     {string} 必填    -- 版本号
  13.  * @param time    {number} 必填    -- 时间戳
  14.  * @param id      {string} 必填    -- 0
  15.  * @param nonce   {string} 必填    -- 32位随机数
  16.  * @param token   {string} 非必填  -- 登陆成功后必填，从后台获取，在localStorage中存取
  17.  * @param sign    {string} 非必填  -- 签名，从后台获取，在localStorage中存取
  18.  */
  19. export const getBasic = ({
  20.   ver = '1.0',
  21.   time = new Date().getTime(),
  22.   id = 1,
  23.   nonce = getNonce(),
  24.   token = getToken(),
  25.   sign
  26. } = {}) => {
  27.   return { ver, time, id, nonce, token, sign }
  28. }
  29.  
  30. /**
  31.  * 生成sign签名
  32.  * @param {Object} obj: 必须有pwd属性
  33.  * @param {array} argsArray 拼接项数组
  34.  */
  35. export const creatSignForDpikey = (obj, argsArray) => {
  36.   let str = ''
  37.   let arr = argsArray
  38.   if (!arr) {
  39.     arr = Object.keys(obj).filter(v => v !== 'pwd')
  40.   }
  41.   arr.sort()
  42.   for (let key of arr) {
  43.     str += obj[key]
  44.     str += '#'
  45.   }
  46.   str += MD5(obj['pwd'])
  47.   let Mstr = SHA512.encrypt(str)
  48.   return Mstr
  49. }

2.添加响应拦截器--响应拦截器中包含对错误码的处理，此处我们一般会新建errorCode.js文件，将需要统一在页面上弹出提示的错误码写在此文件中（好处就是不需要在代码里面每个接口返回的错误码都写一次提示处理，只需要针对需要特别处理的个别错误码做处理例如提示后还有下一步操作的情况就需要特殊处理）

  1. request.interceptors.response.use(
  2.   (res) => {
  3.    let langType = getLocale() || 'en-US'
  4.     if (res.status != 200) {
  5.       return false
  6.     }
  7.     let code
  8.     if (res.data.basic) {
  9.       code = res.data.basic.code  // 获取后端返回的状态码
  10.       if (code === 200) { //接口状态码
  11.         return res.data
  12.       } else if (code === 20004 || code === 10002 || code === 7009 || code === 7088 || code === 7090 || code === 7004 ) { // Invalid token   Token expires //  Token达到最大数量后被强制退出
  13.         if (showLoginMsg) { // token过期导致请求失败，返回登录页后只弹出一个异常提示
  14.           Message.error(errorCode[langType][code])
  15.           logout()
  16.           showLoginMsg = false
  17.           setTimeout(() => {
  18.             showLoginMsg = true
  19.           }, 3000)
  20.         }
  21.         return Promise.reject(code)
  22.       }
  23.       else { //例如公共的 其他code 默认3秒 改为2秒  
  24.         Message.error(errorCode[langType][code])  //改为这种写法后 即使没有翻译 codeMsg也不为false
  25.         if (codeMsg && (codeMsg !== `errorCode[langType][code]`)) {
  26.           if (showOtherMsg) {
  27.             Message({ message: codeMsg,duration: 2000,type: 'error' })
  28.             showOtherMsg = false
  29.             setTimeout(() => {
  30.               showOtherMsg = true
  31.             }, 2000)
  32.           }
  33.         } else if (!specialCode.includes(code)) {
  34.           if (showOtherMsg) {
  35.             Message({ message: res.data.basic.msg,duration: 2000,type: 'error' })
  36.             showOtherMsg = false
  37.             setTimeout(() => {
  38.               showOtherMsg = true
  39.             }, 2000)
  40.           }
  41.  
  42.         }
  43.         return Promise.reject(res.data)
  44.       }
  45.     } else {
  46.       return res.data
  47.     }
  48.   },
  49.   (error) => {
  50.     // axios判断请求超时进行处理
  51.     let langType = getLocale() || 'en-US'
  52.     if (error.message.includes('timeout')) {
  53.       if (showOtherMsg) {
  54.         Message({
  55.           message:message: errorCode[langType]['12345'], 
  56.           type: 'error',
  57.           duration: 2 * 1000,
  58.         })
  59.         showOtherMsg = false
  60.         setTimeout(() => {
  61.           showOtherMsg = true
  62.         }, 2000)
  63.       }
  64.     } else if (error && error.response) {
  65.       // 处理失败的状态码  状态码404 500 503之类的
  66.       let statusCode = error.response.status
  67.       if (showOtherMsg) {
  68.         Message({ message: errorCode[langType][statusCode],duration: 2000,type: 'error' })
  69.         showOtherMsg = false
  70.         setTimeout(() => {
  71.           showOtherMsg = true
  72.         }, 2000)
  73.       }
  74.     } else if (error.message == 'Network Error') {
  75.       if (showOtherMsg) {
  76.         Message({
  77.           message:errorCode[langType]['12344'],
  78.           type: 'error',
  79.           duration: 2 * 1000,
  80.         })
  81.         showOtherMsg = false
  82.         setTimeout(() => {
  83.           showOtherMsg = true
  84.         }, 2000)
  85.       }
  86.     }
  87.     return Promise.reject(error)
  88.   }
  89. )

request.js中的完整的代码如下：

  1. /* eslint-disable no-undef */
  2. import axios from 'axios'
  3. import Vue from 'vue'
  4. import router from '../router' // 获取路由
  5. import { Message } from 'element-ui' // message提示信息组件
  6. import { getBasic } from '@/utils/basic'
  7. import { errorCode } from '@/utils/errorCode'
  8. import { specialCode } from '@/utils/specialCode'
  9. import { getLocale } from '@/lang'
  10. import store from '@/store'
  11. import { logout } from '@/utils/common'
  12.  
  13.  
  14.  
  15. // 生产地址
  16. // axios.defaults.baseURL = serverBase; // 配置axios请求的地址
  17.  
  18.  
  19. const request = axios.create({
  20.   baseURL: '',
  21.   timeout: 60000, //改成60s
  22. })
  23.  
  24. // 格式化请求参数
  25. const formatParams = (params) => {
  26.   const basic = getBasic()
  27.   return {
  28.     basic,
  29.     data: params
  30.   }
  31. }
  32.  
  33.  
  34. let showLoginMsg = true
  35. let showOtherMsg = true
  36.  
  37. // 请求拦截器
  38. request.interceptors.request.use(
  39.   (config) => {
  40.     config.data = config.data || ''
  41.     const { data, type, basic } = config.data
  42.     if ( process.env.NODE_ENV === 'development' ) {
  43.       config.url = `${config.baseUrl || '/api'}${config.url}`
  44.     } else {
  45.       config.url = `${config.url}`
  46.     }
  47.     if (data && basic) return config //如果传参时有传 basic 则不需要再加一次basic
  48.     if (config.url !== '/login') {   // 判断请求是否是登录接口
  49.       config.headers.token = localStorage.getItem('token') // 如果不是登录接口，就给请求头里面设置token
  50.     }
  51.     config.data = type === 'upload' ? data : formatParams(config.data)
  52.     return config // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
  53.   },
  54.   (error) => {
  55.     return Promise.reject(error)
  56.   }
  57. )
  58.  
  59. // 响应拦截器
  60. request.interceptors.response.use(
  61.   (res) => {
  62.    let langType =  getLocale() || 'en-US'
  63.     if (res.status != 200) {
  64.       return false
  65.     }
  66.     let code
  67.     if (res.data.basic) {
  68.       code = res.data.basic.code  // 获取后端返回的状态码
  69.       if (code === 200) { //接口状态码
  70.         return res.data
  71.       } else if (code === 20004 || code === 10002 || code === 7009 || code === 7088 || code === 7090 || code === 7004 ) { // Invalid token   Token expires //  Token达到最大数量后被强制退出
  72.         if (showLoginMsg) { // token过期导致请求失败，返回登录页后只弹出一个异常提示
  73.           Message.error(errorCode[langType][code] ) 
  74.           logout()
  75.           showLoginMsg = false
  76.           setTimeout(() => {
  77.             showLoginMsg = true
  78.           }, 3000)
  79.         }
  80.         return Promise.reject(code)
  81.       }
  82.       else { //例如公共的 其他code 默认3秒 改为2秒  
  83.         const codeMsg = errorCode[langType][code]  //改为这种写法后 即使没有翻译 codeMsg也不为false
  84.         if (codeMsg && (codeMsg !== `errorCode[langType][code] `)) {
  85.           if (showOtherMsg) {
  86.             Message({ message: codeMsg,duration: 2000,type: 'error' })
  87.             showOtherMsg = false
  88.             setTimeout(() => {
  89.               showOtherMsg = true
  90.             }, 2000)
  91.           }
  92.         } else if (!specialCode.includes(code)) {
  93.           if (showOtherMsg) {
  94.             Message({ message: res.data.basic.msg,duration: 2000,type: 'error' })
  95.             showOtherMsg = false
  96.             setTimeout(() => {
  97.               showOtherMsg = true
  98.             }, 2000)
  99.           }
  100.  
  101.         }
  102.         return Promise.reject(res.data)
  103.       }
  104.     } else {
  105.       return res.data
  106.     }
  107.   },
  108.   (error) => {
  109.     // axios判断请求超时进行处理
  110.     let langType =  getLocale() || 'en-US'
  111.     if (error.message.includes('timeout')) {
  112.       if (showOtherMsg) {
  113.         Message({
  114.           message: errorCode[langType]['12345'], 
  115.           type: 'error',
  116.           duration: 2 * 1000,
  117.         })
  118.         showOtherMsg = false
  119.         setTimeout(() => {
  120.           showOtherMsg = true
  121.         }, 2000)
  122.       }
  123.     } else if (error && error.response) {
  124.       // 处理失败的状态码  状态码404 500 503之类的
  125.       let statusCode = error.response.status
  126.       if (showOtherMsg) {
  127.         Message({ message:errorCode[langType][statusCode],duration: 2000,type: 'error' })
  128.         showOtherMsg = false
  129.         setTimeout(() => {
  130.           showOtherMsg = true
  131.         }, 2000)
  132.       }
  133.     } else if (error.message == 'Network Error') {
  134.       if (showOtherMsg) {
  135.         Message({
  136.           message: errorCode[langType]['12344'],
  137.           type: 'error',
  138.           duration: 2 * 1000,
  139.         })
  140.         showOtherMsg = false
  141.         setTimeout(() => {
  142.           showOtherMsg = true
  143.         }, 2000)
  144.       }
  145.     }
  146.     return Promise.reject(error)
  147.   }
  148. )
  149.  
  150. export default request

在项目中使用示例：

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

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

  

闽ICP备14008679号