«

axios拦截添加功能

emer 发布于 2019-3-14 10:24   1825 次阅读     


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: 5000 // 请求超时时间
})


// request拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})


// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 0) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})


// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)


export default service

auth:js


import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
return Cookies.get(TokenKey)
}

export function setToken(token) {
return Cookies.set(TokenKey, token)
}

export function removeToken() {
return Cookies.remove(TokenKey)
}



或 


import axios from 'axios'

export default function ajax(url = '', params = {}, type= 'GET') {
     let promise;
     // 1. 返回promise对象
     return new Promise((resolve, reject)=>{
          // 1.1 判断请求的方式
          if('GET' === type.toUpperCase()){
              // 1.2 拼接字符串
              let paramsStr = '';
              Object.keys(params).forEach(key =>{
                 paramsStr += key + '=' + params[key] + '&'
              });
              // 1.3 过滤最后的&
              if(paramsStr !== ''){
                  paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf('&'));
              }
              // 1.4 拼接完整的路径
              url += '?' + paramsStr;
              // 1.5 发起get请求
              promise = axios.get(url);
          }else if('POST' === type.toUpperCase()){
              promise = axios.post(url, params);
          }
          // 1.6 返回结果
         promise.then((response)=>{
             resolve(response.data);
         }).catch(error=>{
             reject(error);
         })
     })
}