vue axios拦截

在自己搭建VUE项目的时候,网络请求用的是axios,考虑到需要设置默认请求头,请求超时,响应等,于是自己封装axios。
废话不多说,直接上。

/*
 * @Description: axios封装方法
 * @Author:linn
 * @LastEditors: Please set LastEditors
 * @Date: 2019-04-24 09:54:26
 * @LastEditTime: 2019-04-30 11:36:41
 */
import { Toast } from "vant";
import axios from "axios";
import qs from "qs";
import router from "../router";
import store from "../store/store";
const Platform = "wzws2";
let index = 0;
// const cookie = store.state.cookie;
// console.log(store)
// 创建axios实例
// const service = axios.create({
//   timeout: 30000 // 请求超时时间
// })

let BACE_URL =
  process.env.NODE_ENV == "development"
    ? "http://www.yizhihudie.com/"
    : "http://www.yizhihudie.com/";
var service = axios.create();
// service.defaults.timeout = 5000;
service.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";
service.defaults.baseURL = BACE_URL;
// 添加request拦截器
service.interceptors.request.use(
  config => {
    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    return config;
  },

  error => {
    Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      if (
        response.data.info.errcode == 1001 &&
        router.currentRoute.path != "/login" &&
        response.config.url != "www.yizhihudie.com/wesite/wzws2/getbubble" &&
        response.config.url != "www.yizhihudie.com/wesite/wzws2/GetUserState" &&
        response.config.url != "www.yizhihudie.com/wesite/wzws2/GetMyStatus"
      ) {
        console.log(response);
        Toast({
          message: "请重新登录",
          duration: 3000,
          forbidClick: true
        });
        // 清除token
        localStorage.removeItem("cookie");
        // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
        setTimeout(() => {
          router.replace({
            path: "/login",
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          console.log(
            router.currentRoute.fullPath,
            "router.currentRoute.fullPath"
          );
          localStorage.setItem("beforeLoginUrl", router.currentRoute.fullPath);
        }, 3000);
      }
      return Promise.resolve(response);
    } else {
      return Promise.resolve(response);
      // return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
  // 下面列举几个常见的操作,其他需求可自行扩展
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面,并携带当前页面的路径
        // 在登录成功后返回当前页面,这一步需要在登录页操作。
        case 401:
          router.replace({
            path: "/login",
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Toast({
            message: "登录过期,请重新登录",
            duration: 1000,
            forbidClick: true
          });
          // 清除token
          localStorage.removeItem("token");
          store.commit("loginSuccess", null);
          // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: "/login",
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;

        // 404请求不存在
        case 404:
          Toast({
            message: "网络请求不存在",
            duration: 1500,
            forbidClick: true
          });
          break;
        // 其他错误,直接抛出错误提示
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          });
      }
      return Promise.reject(error.response);
    }
  }
);

export function get(url, params = {}) {
  // params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
  if (url != "http://www.yizhihudie.com/wesite/user/login") {
    // params["cookie"] = '';
    params["platform"] = Platform;
    // console.log(cookie,"cookie")
    // console.log(params, "params");
    return service({
      url: url,
      method: "get",
      headers: {},
      params
    });
  } else {
    return service({
      url: url,
      method: "get",
      headers: {},
      params
    });
  }
}
// export default function post(url, params) {
//     return axios.post(url, qs.stringify(params))
//       .then((response) => {
//         console.log('response', response);
//         return response;
//       })
//       .catch((error) => {
//         console.log('error', error);
//         return error;
//       });
//   }
//封装post请求
export function post(url, data = {}) {
  //默认配置
  // data["cookie"] = cookie;
  // data["platform"] = Platform;
  let sendObject = {
    url: url,
    method: "post",
    headers: {},
    data: qs.stringify(data)
  };
  // sendObject.data = JSON.stringify(data);
  return service(sendObject);
}

// //封装put方法 (resfulAPI常用)
// export function put(url,data = {}){
//   return service({
//     url: url,
//     method: 'put',
//     headers: {
//       'Content-Type': 'application/json',//设置请求头请求格式为JSON
//     //  'access_token': this.token //设置token 其中K名要和后端协调好
//     },
//     data:qs.stringify(data)
//   })
// }
// //删除方法(resfulAPI常用)
// export function deletes(url){
//   return service({
//     url: url,
//     method: 'delete',
//     headers: {}
//   })
// }

//不要忘记export
export { service };

最后将这个axios.js文件引入main.js中,并将引入的axios挂载到Vue实例上就ok了。

完美!如有不对的地方还请各位大佬指点,万分感谢。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值