ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

axios的拦截器

2021-05-16 17:33:43  阅读:121  来源: 互联网

标签:axios return get token 拦截器 params key


项目中的用法:
// 创建 axios 实例
let myRequest = axios.create({
  responseType: 'json',
    // validateStatus 是axois的内置方法,在axios包的index.d.ts声明文件中做了声明
  validateStatus(status) {
    // 200 外的状态码都认定为失败
    return status === 200;
  }
});

// 请求拦截, 一般用于在请求头中添加token信息
myRequest.interceptors.request.use(config => {
    const token = sessionStorage.getItem('token')
    if (token ) { //如果 token 存在,则每个http header都加上token
      config.headers.authorization = token  //请求头加上token
    }
    return config
},error=>{
    return Promise.reject(error)
})

// 响应拦截
myRequest.interceptors.response.use(response=>{
    return response;
},error=>{
    // 可对一般的http状态码进行拦截处理,返回友好的用户提示
  switch (error.response.status) {
    case 404:
      ElementUI.Notification({
        title: '系统提示',
        message: '很抱歉,资源未找到',
        type: 'info'
      });
      break;
    case 403:
      break;
    case 401:
      ElementUI.MessageBox.confirm('登录信息已失效,请重新登陆!', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        closeOnClickModal: false,
        type: 'warning',
        showClose: false
      }).then(() => {
        // 清空session中保存的所有值
        sessionStorage.clear();
        router.push("/");
        location.reload();
      });
      break;
    default:
      ElementUI.Notification({
        title: '系统提示',
        message: errorMessage,
        type: 'info'
      });
      break;
  }
    return Promise.reject(error);
})

// 对 axios 的各种请求方式,进行二次封装
const request = {
    // 与后台商定后,统一项目中的入参格式
    post(url, params) {
        // 格式化 请求入参
      params = formatParams(params);
      return myRequest.post(url, params, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
    },
    // 因为 axios 中post和get的调用方式不一样,此处对get的封装,主要为了在项目中使用时,get和post写法一样,更加方便
    get(url, params) {
      let _params;
      if (Object.is(params, undefined)) {
        _params = '';
      } else {
        _params = '?';
        for (let key in params) {
          if (params.hasOwnProperty(key) && params[key] !== null) {
            _params += `${key}=${encodeURIComponent(params[key])}&`;
          }
        }
      }
      return myRequest.get(`${url}${_params}`);
    }
}

function formatParams(params) {
  return {
    'ROOT': {
      'HEAD': {},
      'BODY': params
    }
  };
}

export default request;
拦截器作用:
  • 在请求发出前对http请求的head做一些处理,比如添加一些token信息,进行用户验证(请求拦截器)
  • 在得到服务器接口响应后,对响应数据做一些统一操作,或者判断常用的http状态码,进行不同的处理,比如404资源未找到、401未授权、403无权访问等

标签:axios,return,get,token,拦截器,params,key
来源: https://www.cnblogs.com/upward-lalala/p/14774257.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有