axios的请求封装-蒲公英云

参考一

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
  })
}

参考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)
}