创建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);

      });

  });

}