axios的请求封装

╰+哭是因爲堅強的太久メ 2022-12-18 08:58 257阅读 0赞

1.  参考一

import axios from 'axios'
    import qs from 'qs'
    import store from '../store/index'
    import {  MessageBox } from 'element-ui'
    
    /* * 一、request： * 1. 说明：封装对后台的请求，可以选择自动处理一些异常。 * 2. 参数： * - url： 后台地址，必填，String，如："/user/add" * - params： 请求参数，选填，Object，，默认值：{} * - config： axios参数，选填，Object，默认值：{} * - autoErrorRes： 是否自动处理响应错误，选填，Boolean，默认值：true * - autoErrorData：是否自动处理后台错误，选填，Boolean，默认值：true * - autoCancel： 离开路由时是否自动取消请求，选填，Boolean，默认值：true * 3. 返回： * - 成功：Promise.resolve(请求成功后的结果：response.data) * - 失败： * - 请求异常：Promise.reject(http响应错误) * - 请求失败：Promise.reject(请求失败后的结果：response.data) * 4. 约定后台返回数据格式： * response.data = { * "code": 0, // 成功/失败标识，0=成功，1=失败 * "data": {}, // 成功时可选参数，请求的响应数据 * "message": "用户名字重复" // 失败时必需参数，错误提示 * } * * 二、sessionRequest： * 1. 说明：利用sessionStorage缓存请求，可以选择outTime，其他同request。 * 2. 参数： * - outTime：距离上次请求多少秒后需要重新请求，选填，Integer，小于0表示不重新请求，默认值：-1 * * 三、localRequest： * 1. 说明：利用localStorage缓存请求，可以选择outTime，其他同request。 * 2. 参数： * - outTime：距离上次请求多少秒后需要重新请求，选填，Integer，小于0表示不重新请求，默认值：604800（一周） * **/
    
    //将格式设置为formdata
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
    axios.defaults.transformRequest = [function (data) { 
        let ret = ''
        for (let it in data) { 
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }]
    
    const axiosCustom = axios.create({ 
      baseURL: process.env.VUE_APP_BASE_AXIOS,
      //是否携带cookie-跨域时无法携带cookie
      withCredentials: false,
      timeout: 20000 
    })
    
    //jwt验证，每次发给服务器的所有请求头部都加入token
    axiosCustom.interceptors.request.use(function (config) { 
      config.headers.token = localStorage.getItem('user-token')
      return config
    })
    
    /* 普通请求 */
    export const request = (url,params = { },methods='post', config = { }, autoErrorRes = true, autoErrorData = true, autoCancel = true) => { 
      if (autoCancel) { 
        config = Object.assign({  cancelToken: store.state.source.token }, config)
      }
      const args = Object.assign({ 
        'method': methods,
        'url': url,
        'data': params
      }, config)
       if (!['put', 'post', 'patch'].includes(args.method.toLowerCase())) { 
        args['params'] = args['params'] || args['data']
        args['paramsSerializer'] = args['paramsSerializer'] || function (params) { 
          return qs.stringify(params, {  arrayFormat: 'indices' })
        }
      }
    
      
      return axiosCustom(args).then((res) => { 
          // 未登录=login:type
          if (res.data.data === 'login') { 
              return Promise.reject('nologin')
          }
          if (autoErrorData && res.data.hasOwnProperty('code') && res.data.code !=="0") { 
          /*const errMsg = res.data.msg || '未知的服务器错误，请联系管理员！'*/
          return Promise.reject(res.data.msg)
         }
          return res.data
      }, (error) => { 
        // 自动处理网络请求错误
        console.error(error)
        error.response = error.response || { }
        const errStatus = error.response.status || -100
        if (autoErrorRes&&error.message) { 
          MessageBox.alert('网络请求异常，请联系管理员！', '请求异常：' + errStatus, {  confirmButtonText: '确定' })
        }
        return Promise.reject(error)
      })
    }
    
    /* 使用sessionStorage缓存的请求 */
    export const sessionRequest = (url, params = { }, config = { }, outTime = -1, autoErrorRes = true, autoErrorData = true, autoCancel = true) => { 
      const itemKey = url + '#' + JSON.stringify(params) + JSON.stringify(config)
      let itemVal = sessionStorage.getItem(itemKey)
      const nowTime = new Date().getTime()
      if (itemVal) { 
        itemVal = JSON.parse(itemVal)
        const overTime = nowTime - itemVal.lastTime
        if (outTime < 0 || overTime < outTime * 1000) { 
          return Promise.resolve(itemVal.data)
        }
      }
      return request(url, params, config, autoErrorRes, autoErrorData, autoCancel).then(data => { 
        sessionStorage.setItem(itemKey, JSON.stringify({ 
          'lastTime': nowTime,
          'data': data
        }))
        return data
      })
    }
    
    /* 使用localStorage缓存的请求 */
    export const localRequest = (url, params = { }, config = { }, outTime = 604800, autoErrorRes = true, autoErrorData = true, autoCancel = true) => { 
      const itemKey = url + '#' + JSON.stringify(params) + JSON.stringify(config)
      let itemVal = localStorage.getItem(itemKey)
      const nowTime = new Date().getTime()
      if (itemVal) { 
        itemVal = JSON.parse(itemVal)
        const overTime = nowTime - itemVal.lastTime
        if (outTime < 0 || overTime < outTime * 1000) { 
          return Promise.resolve(itemVal.data)
        }
      }
      return request(url, params, config, autoErrorRes, autoErrorData, autoCancel).then(data => { 
        localStorage.setItem(itemKey, JSON.stringify({ 
          'lastTime': nowTime,
          'data': data
        }))
        return data
      })
    }

1.  参考2

import axios from 'axios'
    import env from './env'
    import store from '../store'
    import router from '../router'
    import {  message } from 'ant-design-vue'
    //项目不同环境的baseURL
    // axios.defaults.baseURL = env.baseURL
    
    // 设置默认超时时间10s
    // axios.defaults.timeout = 10000
    
    // 创建axios实例
    let instance = axios.create({ 
      baseURL: env.baseURL,
      timeout: 8000
    })
    
    /** * 跳登录页面 */ 
    const toLogin = () => { 
      router.replace('/login')
    }
    
    /** * 请求失败后的统一错误处理 */
    const errorHandle = (status, other) => { 
      // 状态码判断
      switch (status) { 
        case 401:
          store.commit('deleteAccount')
          toLogin()
          break;
        
        case 404:
          message.error('请求的资源不存在')
          break;
        case 500:
          console.log(other)
          message.error('服务器错误')
          break;
        
        default:
          console.log(other)
          message.error(other.msg)
          break;
      }
    }
    
    // 请求拦截器
    instance.interceptors.request.use(config => { 
      let authToken = localStorage.getItem('Authorization')
      if(authToken){ 
        config.headers.Authorization = `jwt ${ authToken}`
      }
      return config
    }, error => { 
      return Promise.reject(error)
    })
    
    // 响应拦截器
    instance.interceptors.response.use(
      // 2xx返回（测试202）
      response => { 
        // console.log(response)
        let res = response.data
        if(response.status >= 200 && response.status < 300) { 
          if(res.code === 'OK'){ 
            return Promise.resolve(res.data)
          } else { 
            message.error(res.msg)
            return Promise.reject()
          }
        } else { 
          return Promise.reject(res)
        }
      },
    
      // 2xx以外返回
      error => { 
        // console.dir(error)
        const {  response } = error
        if(response) { 
          // 请求已发出，但是不在2xx范围内
          errorHandle(response.status, response.data)
          return Promise.reject(response)
        } else { 
          //处理断网情况
          message.error('网络错误')
          return Promise.reject(error)
        }
      }
    )
    
    export default instance