Vue项目实战总结（一 拦截器的配置）

拦截器
统一处理错误及配置请求信息
配置方法：
1、安装 axios , 命令： npm install axios --save
2、在根目录的network目录下新建文件 request.js ，内容如下：

import axios from "axios";

export function request(config) {
  //创建axios实例
  const instance = axios.create({
    baseURL: "http://127.0.0.1:3701",
    timeout: 6000,
  });
  //请求拦截器
  instance.interceptors.request.use(
    config => {
      console.log(config)
      //为请求头对象添加token验证的Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
      return config;
    },
    error => {
      console.log(error);
    }
  );
  //响应拦截器
  instance.interceptors.response.use(
    res => {
      return res.data;
    },
    error => {
      console.log(error);
    }
  );
  //发送真正的网络请求
  return instance(config);
}

3、在main.js中进行引用，并配置一个别名（$http）来进行调用:

import axios from 'axios'

Vue.prototype.$http= axios//全局注册

4、在api接口中调用拦截器

 import { request } from "@/network/request";