封装vue发送请求

发布时间:2019-01-10 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了封装vue发送请求脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
import axios from 'axios'
import { getToken } from '@/util/token'
import qs from 'qs'
import router from './router'
import config from './config'
import Vue from 'vue'
console.log(config)

// 创建axios实例
const http = axios.create({
    baseURL: config.api_base,timeout: 15000,transformRequest: [
        function(data,headers) {
            console.log(data)
            data = data || {}
            data = qs.stringify(data)
            headers['Authorization'] = getToken()
            return data
        }
    ]
})

// request拦截器
http.interceptors.request.use(config => {
    config.data = config.data ? config.data : {}
    if (router.currentRoute && router.currentRoute.meta.requiresAuth) {
        if (getToken() === '') {
            return Promise.reject('请登录后操作')
        } else {
            return config
        }
    } else {
        return config
    }
})

// respone拦截器
http.interceptors.response.use(
    response => {
        let data = response.data

        let msg = data.message || ''
        if (data.code == 401) {
            // 账号禁用
            return Promise.reject(new Error(msg))
        } else if (data.code == 403) {
            // 登录失效 需重新登录
            Vue.toasted.error('登录失效 需重新登录',{ icon: 'error' }).goAway(2000)
            router.replace({ name: 'login' })
            return Promise.reject(new Error(msg))
        }
        return data
    },error => {
        return Promise.reject(error)
    }
)

export default http

总结

以上是脚本之家为你收集整理的封装vue发送请求全部内容,希望文章能够帮你解决封装vue发送请求所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: