【随笔】Vue封装axios，请求拦截

Vue中配置axios

//普通安装
npm install axios
//使用淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install axios
//持久使用淘宝镜像(不建议) 关于npm config 的使用可以参照 npm config --help
npm config set registry https://registry.npm.taobao.org

在src文件夹下新建utils文件夹，然后在该文件夹下新建request.js（文件的位置命名视个人喜好而定）

import axios from 'axios'
import {Message,MessageBox} from 'element-ui'
import store form '../store'
import {getToken} from '@/utils/auth'
//创建axios实例
const service=axios.create({
	baseURL:process.env.BASE_API,//可以指定为 http://localhost:8080
	timeout:4000//请求超时时间
})
//request拦截器
service.interceptors.request.use(config=>{
	if(store.getters.token){ //自己制定逻辑
		config.headers['Authorization']=getToken()
	}
	return config
	},
	error=>{
		alert("请求出错误")
		Promise.reject(error)
	}
)
//response拦截器
service.interceptors.response.use(
  response=>{
  //可以针对response状态码进行判断
    /*
    状态码非200抛错
     */
    const res = response.data

    if(res.code!==200){
      Message({
        message:res.message,
        type:'error',
        duration:1000
      })
      // 401:未登录
      if(res.code===401||res.code===403){
        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:1000
    })
    return Promise.reject(error)
  }
)

export default service

使用axios新建js文件（文件名随意）

import request from '@/utils/request'
export function login(username,password){
	return request({
		url:'/admin/login',
		method:'post',
		data:{
			username,
			password
		}
	})
}

在vue组件文件中可以引用

//部分
import {login} from '@/api/login'
export default{
	methods:{
	Handlerlogin(){
		login("admin","123").then(response=>{
			//读取返回数据
		}).catch(error=>{
			//处理错误
		})
	}
	}
}