axios封装(痛定思痛下的总结)

刺骨的言语ヽ痛彻心扉 2021-07-25 02:23 223阅读 0赞

## 封装 ##

import axios from 'axios'
    import {  Message } from 'element-ui'
    import {  getToken, removeToken } from './token'
    import router from '../router/index'
    
    // 创建实例时设置配置的默认值
    var instance = axios.create({ 
      baseURL: process.env.VUE_APP_URL,
      withCredentials: true
    })
    
    // 添加请求拦截器
    instance.interceptors.request.use(function (config) { 
      // 在发送请求之前做些什么
      if (getToken()) { 
        config.headers.token = getToken()
      }
      return config
    }, function (error) { 
      // 对请求错误做些什么
      return Promise.reject(error)
    })
    
    // 添加响应拦截器
    // 添加响应拦截器
    instance.interceptors.response.use(function (response) { 
      // 对响应数据做点什么
      // return response
      if (response.data.code === 200) { 
        return response.data
      } else if (response.data.code === 206) { 
        Message.error(response.data.message)
        router.push('/')
        removeToken()
        return response.data
      } else { 
        Message.error(response.data.message)
        // return Promise.reject('error')
        return response.data
      }
    }, function (error) { 
      // 对响应错误做点什么
      return Promise.reject(error)
    })
    
    export default instance

## 使用 ##

import instance from '@/utils/request.js'
    // 注册验证码
    function getPhoneCode (data) { 
      return instance({ 
        url: '/sendsms',
        method: 'post',
        data: data
      })
    }
    // 注册功能
    function register (data) { 
      return instance({ 
        url: '/register',
        method: 'post',
        data: data
      })
    }
    
    // export default getPhoneCode
    export {  getPhoneCode, register }

引用修改：[axios文档][axios]

[axios]: https://www.kancloud.cn/yunye/axios/234845