创建axios

简单的封装一下axios请求，包含了请求前的处理，返回结果和请求异常处理

import axios from "axios";
import store from "../store.js";

//封装axios
axios.defaults.headers["Content-Type"] = "application/json";

//创建axios实例
const service = axios.create({
  baseURL:
    process.env.NODE_ENV == "dev" ? "/api" : process.env.VUE_APP_BASE_API, //本地测试跨域配置
  timeout: 130000, //请求超时
  withCredentials: true //跨域请求时发送Cookie
});

request拦截器

请求前的处理

const TIME_ZONE = "timeZone";

//http request 拦截器
service.interceptors.request.use(
  config => {
    // showProgress 是否显示Loading框
    if (!(config.data && config.data.showProgress)) {
      /* 请求显示Loading框
      Toast.loading({
        duration: 0,
        message: "Loading...",
        forbidClick: true
      });
      */
    }
    //获取token
    const token = window.localStorage.getItem("omni-token");
    config.headers["xxx"] = token; // xxx服务器对应token名

    //如果我们的应用是针对世界各地的，当要把后台(服务器)存的时间展示给不同地区的用户时
    //这个时间应该经过时差转换、 转成用户客户端本地的时间，然后呈现给用户
    //获得本地与格林威治时间的时差：new Date().getTimezoneOffset()，单位为分钟。

    let timezone = new Date().getTimezoneOffset() / -60;
    if (timezone > 0) {
      timezone = `+${timezone}:00`;
    } else {
      timezone = `${timezone}:00`;
    }
    config.headers[TIME_ZONE] = timezone;

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

response拦截器

返回结果和请求异常处理

//http response 拦截器
service.interceptors.response.use(
  response => {
    if (response.config.data) {
      let json = JSON.parse(response.config.data);
      if (!json.showProgress) {
        //Toast.clear();
      }
    } else {
      //Toast.clear();
    }
    const code = response.data.code;
    if (code === 401) {
      //token令牌过期失效 清空缓存
      store.dispatch("tokenExpired");
    } else if (code === 500) {
      //500错误
      return null;
    } else {
      //接口请求正常 直接返回结果
      return response;
    }

    return Promise.reject(response.data.message);
  },
  error => {
    //接口请求异常，抛出异常信息
    // Toast.fail({
    // 	duration: 2000,
    // 	message: error.data.message,
    // 	closeOnClick: false,
    // 	closeOnClickOverlay: false,
    // })

    //  1.判断请求超时
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')
      // return service.request(originalRequest);//例如再重复请求一次
    }

    // 2.需要重定向到错误页面
    const errorInfo = error.response
    if (errorInfo) {
      // error = errorInfo.data
      if (errorInfo.status === 403) {
        router.push({
          path: '/error/403'
        })
      }
    }

    return Promise.reject(error);
  }
);

Get请求(Json)

export function requestGet(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "get",
      params: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Get请求(form表单提交)

export function requestGetForm(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "get",
      data: null,
      params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post请求(Json)

export function requestPost(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post请求(form表单提交)

export function requestPostForm(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: null,
      params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post请求(文件上传)

export function requestFileUpload(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: params,
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}