vue+axios request拦截器与响应拦截器

1，创建request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
let base_url = process.env.BASE_URL;//这里baseUrl放在dev.env.js与prod.env.js
const service = axios.create({
  baseURL: base_url,
  timeout: 15000
})
// request拦截器
service.interceptors.request.use(config => {
  console.log(config)
  return config
}, error => {
  console.log(error)
  if (!error.response) {
    console.log("Please check your internet connection.");
  }

  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
  // 未设置状态码则默认成功状态
// console.log("res.data："+JSON.stringify(res.data));
  const code = res.data.code|| 200;
  console.log(code)
  // 获取错误信息
  if (code !== 200){
    if (code === 400) {
      MessageBox.confirm(
        '登录状态已过期，您可以继续留在该页面，或者重新登录',
        '系统提示',
        {
          confirmButtonText: '重新登录',
          type: 'warning'
        }
      ).then(() => {
        this.$router.push("/login")
      })
    }else{
      Message.error(res.data.msg);
    }
  } else {
    return res
  }
},
error => {
  return Promise.reject(error)
}
)

export default service

2,新建api.js，存放接口，也可以直接引用request

import request from '@/utils/request'
export const apiKit = {
	//登录
	login: (data) => {
		return request({
			url: '/api/user/login',
			method: 'post',
			data
		})
	}
}

3，组件使用

import { apiKit } from "../utils/api"
login(){
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return false;
        let password = Crypto.encrypt(this.ruleForm.password)，//加密
        let params = {
          userName: this.ruleForm.account,
          password: password,
        }
        console.log(params)
        apiKit.login(params).then((response) => {
          console.log(response)
          this.$message.success("登录成功!")
        }).catch(err => console.log(err))
        
      });
    }