axios拦截器

1,541 阅读1分钟
axios拦截器用来在请求或响应被 thencatch 处理前拦截它们。比如token验证

//文件名 fetch.js

import axios from 'axios'
import store from './store' //引入vuex
import { Message } from 'element-ui'

const serves = axios.create({
    baseURL: 'https://api.example.com',
    timeOur: 5000   // 请求过期时间
})

serves.interceptors.request.use(
    config => {
        // 判断是否有token
        if(store.state.token) {
            config.header['T-token'] = getCookie('token') // 'T-token':token的参数名,getCookie从cookie中取到token        }
    return config
    },
    error => Promise.reject(error)
)

serves.interceptors.response.use(
    res=> {
        const {data} = res.data
            if(data.code !== 200) {                
                 Message({
                    message: data.message || 'error',
                    type: 'error',
                    duration: 5 * 1000
                })
            } else {
                return data
            }
          },
    error => Promise.reject(error)
)

export default serves

使用拦截器
import serves from './fetch.js'

// post 请求 注意参数使用data作为参数名

export function getUserInfo(data) {
    return serves({
        url: '/userinfo',
        methods: 'post'
        data
    })}

// get 请求使用params作为参数名
export function getUserInfo(params) {
    return serves({
        url: '/userinfo',
        methods: 'post',
        params    })}