vue 拦截器

第一步 安装 axios

首先在项目文件下新建utils文件夹，在该文件夹下新建文件Axios.js。

import axios from "axios";
axios.interceptors.request.use(
  config => {
    config.withCredentials = true; // 允许携带token ,这个是解决跨域产生的相关问题
    config.timeout = 6000;
    let token = sessionStorage.getItem("csrf-token") || "token";
    if (token) {
      config.headers = {
        "access-token": token
    
      };
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    //返回正确做逻辑处理
    return response;
  },
  error => {
    //返回错误做逻辑处理
    return Promise.reject(error);
  }
);
export default axios;

请求方式中使用

import axios from "./Axios";
axios.defaults.timeout = 15000; //超时响应
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";
//设置带cookies
axios.defaults.withCredentials = true;

/**
 *
 * pots方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function posts(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, {
        params: params
      })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data);
      });
  });
}

//axios post请求
export function axiospost(url, data) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",
      url: url,
      data: data
    }).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function axioget(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url: url,
      params: params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function axiosput(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}