zoukankan      html  css  js  c++  java
  • Vue---axios封装

    import axios from 'axios'
    import store from '@/store'
    import { MessageBox, Message } from 'element-ui'
    import router from '@/router'
    import LocalStorageUtils from '@/utils/LocalStorageUtils'
    // 发送请求时携带cookie
    axios.defaults.withCredentials = true
    
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      timeout: 30000 // / 设置超时时间为30s
    })
    
    service.interceptors.request.use(
      config => {
        var data = config.data
        if (data !== null && data !== undefined) {
          var key = Object.keys(data).filter(name => !(data[name] === null || data[name] === undefined))
          key = key.map(name => `${name}=${encodeURIComponent(data[name])}`)
          config.data = key.join('&')
        }
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
        config.headers['x-requested-with'] = 'XMLHttpRequest'
        if (store.state.webToken.token !== null) {
          config.headers['AUTH-WEB-TOKEN'] = store.state.webToken.token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    
    service.interceptors.response.use(response => {
      if (!response.data.success) {
        if (response.data.code === '-222') {
          MessageBox.confirm('您已经登出,请登出后再次登录', '确认登出', {
            confirmButtonText: '重新登录',
            type: 'warning'
          }).then(() => {
            store.commit('LOGOUT')
            LocalStorageUtils.setStore()
            router.push(`/login`)
          })
        } else if (response.data.code === '-111') {
          MessageBox.confirm('首次登陆,请修改密码', '修改密码', {
            confirmButtonText: '修改密码',
            type: 'warning'
          }).then(() => {
            router.push(`/changepass`)
          })
        } else {
          Message({
            message: response.data.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          return Promise.reject(new Error(response.data.message || 'Error'))
        }
      } else {
        return response.data
      }
    }, error => {
      console.log('err' + error) // for debug
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      setTimeout(() => {
        if (!error.response) {
          if (error.message.includes('timeout')) {
            router.push('/401')
          }
        }
      }, 5000)
      return Promise.reject(error)
    })
    
    export default service

     以上是vue-element-admin基于axios封装的请求

     
  • 相关阅读:
    大型高性能ASP.NET系统架构设计
    读写锁ReaderWriterLockSlim
    日常生活英语单词大全
    unity3d读取plist或xml文件
    WIN7开无线
    asp.net 2.0中新增的web.config的默认namespace功能 (转)
    面向对象的一些基本概念
    大话设计模式之策略模式
    大话设计模式之简单的工厂模式
    iOS UI 之UILable
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13066571.html
Copyright © 2011-2022 走看看