vue-cli axios 请求封装(调用接口时长,错误码处理,接口返回参数判断统一处理)

参考大佬git:https://github.com/Nirongxu/nodePlatform-eggjs/blob/master/vue-xuAdmin/src/axios/index.js

/**
 * Created by WebStorm.
 * User: nirongxu
 * Date: 2019-01-02
 * Description: 文件描述
 */
import axios from 'axios'
import Cookies from 'js-cookie'
import { Message } from "element-ui";
// axios默认配置
axios.defaults.timeout = 10000;   // 超时时间
axios.defaults.baseURL = process.env.API_HOST;
console.log(axios.defaults.baseURL);
// 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    if (Cookies.get('access_token')) {
      //用户每次操作,都将cookie设置成半小时
      // Cookies.set('access_token', Cookies.get('access_token') ,{ expires: 7 });
      config.headers.Authorization = "Bearer" + Cookies.get('access_token')
    }
    return config;
  },
  error => {
    return Promise.reject(error.response);
  });

// 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
  response => {
    // 接口返回的数据,根据需求自行处理(可打印response 看结果)
    if (response.data.code === 11000) {
      // Message({
      //   message: '长时间未操作,请重新登录',
      //   type: 'warning'
      // });
      Cookies.set('access_token', response.data.message ,{ expires: 7 });
      // Cookies.remove('access_token');
      setTimeout(() => {
        location.reload()
      }, 500)
      return Promise.reject()
    }else if(response.data.code === 10000){
      Message({
        message: response.data.message,
        type: 'warning'
      });
      return Promise.reject(response)
    }else {
      return Promise.resolve(response);
    }
  },
// 请求接口错误时抛出
  error => {
    if (error.response.status === 404) {
      Message({
        message: '请求地址出错',
        type: 'warning'
      });
    }else if (error.response.status === 401) {
      Message({
        message: error.response.data.message,
        type: 'warning'
      });
      Cookies.remove('access_token');
      setTimeout(() => {
        location.reload()
      }, 3000)
      return false
    }
    return Promise.reject(error.response)   // 返回接口返回的错误信息
  });
export default axios;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥阅读 6,870评论 0 34
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 6,401评论 0 2
  • vue-cli3项目搭建配置以及性能优化 在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新...
    bayi_lzp阅读 19,517评论 16 68
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 4,181评论 0 0
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,133评论 1 4