zoukankan      html  css  js  c++  java
  • vue axios 封装(三)

    封装三:

    import axios from 'axios'
    import { Message, MessageBox } from 'element-ui'
    import store from '../store'
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 10000 // 请求超时时间
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
      // console.log('store.getters.token', getToken())
      if (store.getters.token) {
        // console.log('tag9528', 'bearer ' + getToken())
        config.headers['Authorization'] = 'bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      } else if (getToken()) {
        config.headers['Authorization'] = 'bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
      // Do something with request error
      // console.log(error) // for debug
      Promise.reject(error)
    })
    
    // service.interceptors.request.use(config => {
    //   if (store.getters.token) {
    //     config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    //   }
    //   return config
    // }, error => {
    //   // Do something with request error
    //   console.log(error) // for debug
    //   Promise.reject(error)
    // })
    
    // respone拦截器
    // service.interceptors.response.use(
    //   response => {
    //     console.log(response)
    //     const res = response.data
    //     if (!res.success) {
    //       Message({
    //         message: res.message,
    //         type: 'error',
    //         duration: 5 * 1000
    
    //       })
    //       // 401:Token 过期了;
    //       if (response.status === 401) {
    //         // 重新获得token
    //       }
    //       // 50008:非法的token; 50012:其他客户端登录了;
    //       if (res.code === 50008 || res.code === 50012 || response.status === 401) {
    //         MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
    //           confirmButtonText: '重新登录',
    //           cancelButtonText: '取消',
    //           type: 'warning'
    //         }).then(() => {
    //           store.dispatch('FedLogOut').then(() => {
    //             location.reload()// 为了重新实例化vue-router对象 避免bug
    //           })
    //         })
    //       }
    //       return Promise.reject('error')
    //     } else {
    //       return response
    //     }
    //   },
    //   error => {
    //     console.log('err' + error)// for debug
    //     Message({
    //       message: error.message,
    //       type: 'error',
    //       duration: 5 * 1000
    //     })
    //     return Promise.reject(error)
    //   }
    // )
    service.interceptors.response.use(
      response => {
        const res = response.data
        if (!res.success) {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
          if (res.success === false) {
            Message({
              message: res.error,
              type: 'error',
              duration: 5 * 1000
            })
          }
          // 401:Token 过期了;
          if (response.status === 401) {
            // 重新获得token
          }
          // 50008:非法的token; 50012:其他客户端登录了;
          if (res.code === 50008 || res.code === 50012 || response.status === 401) {
            MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()// 为了重新实例化vue-router对象 避免bug
              })
            })
          }
          return Promise.reject('error')
        } else {
          return response
        }
      },
      error => {
        // console.log('err' + error)// for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    /**
     * 封装post请求
     * @param url
     * @param data
     */
    export function post(url, data) {
      return service({
        url: url,
        method: 'post',
        data: data
      })
    }
    
    /**
     * 封装get请求
     * @param url
     * @param data
     */
    export function get(url, data) {
      return service({
        url: url,
        method: 'get',
        data: data
      })
    }
    /**
     * 封装http请求
     * @param url
     * @param data
     */
    export function http(obj) {
      return service({
        url: obj.url,
        method: obj.method,
        data: obj.data
      })
    }
    export default service
    
  • 相关阅读:
    SQL语句汇总——数据修改、数据查询
    Spring AOP详解
    action类中属性驱动和模型驱动的区别
    数组指针的用法,用处。
    C,C++回文字符串判断(字符串指针的用法)
    C,C++容易被忽略的问题
    c,c++函数返回多个值的方法
    adsf
    Establishing a Build Environmen
    Setting up a Mac OS build environment
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/9933616.html
Copyright © 2011-2022 走看看