vue-axios 拦截

在src创建一个文件夹utils再创建request.js文件

import axios from 'axios' //导入axios

const instance = axios.create({
  baseURL: "https:api.cat-shop.penkuoer.com", //baseURL会在发送请求的时候拼接在url参数前面,在不同的生产环境中修改这个就行了
  timeout: 5000
})

//请求拦截
//所有的网络请求都会先走这个方法，我们可以在它里面为请求添加一些自定义的类容
instance.interceptors.request.use(
  function(config) {
    console.group("全局请求拦截");
    console.log(config);
    console.groupEnd();
    config.headers.token = '123456'; //在headers中添加token=123456
    return config
  },
  function(err) {
    return Promise.reject(err);
  }
);

//响应拦截
//所有的网络请求返回数据后都会先执行此方法
// 此处可以根据服务器的返回状态码做相应的数据，比如说404,401,50x
instance.interceptors.response.use(
  function(response) {
    console.group("全局响应拦截");
    console.log(response);
    console.groupEnd();
    return response;
  },
  function(err){
    return Promise.reject(err);
  }
);

export function get(url, params) { //封装get传入URL和params
  return instance.get(url, {
    params
  });
}

export function post(url, data) { //封装post传入URL和data
  return instance.post(url, data);
}

export function del(url) { //封装del传入URL
  return instance.delete(url);
}

export function put(url, data) { //封装put传入URL和params
  return instance.put(url, data);
}