2019-12-21

axios封装

import axios from 'axios';
import qs from 'qs';
/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
    // 状态码判断
    switch (status) {
        // 401: 未登录状态,跳转登录页
        case 401:
            break;
        // 403 token过期
        case 403:
            break;
        // 404请求不存在
        case 404:
            break;
        default:
            console.log(other);   
        }}

// 创建axios实例
var instance = axios.create({    
    timeout: 1000 * 12,
    // baseURL: 'https://api.example.com'
});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 请求拦截器 
 * 每次请求前,如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(    
    config => {        
        if (config.method === 'get') {
            config.headers['Content-Type'] = 'application/json'
        }
        if (config.method === 'post') {
            config.data = qs.stringify(config.data)
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        }
        return config;    
    },    
    error => Promise.error(error))

// 响应拦截器
instance.interceptors.response.use(    
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出,但是不在2xx的范围 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 处理断网的情况
            if (!window.navigator.onLine) {
            //和女友商量结果
            //弹个框提醒一下OK
            //    store.commit('changeNetwork', false);
            } else {
                return Promise.reject(error);
            }
        }
    });
  
export default instance;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 为什么要使用 static 关键字? 当我们编写一个类的时候,其实就是在描述其对象的属性和行为,而并没有产生...
    noset阅读 1,436评论 0 0
  • 是否选择大前端? 虽然现在大前端很热门,是不是适合自己呢?这个需要想一想 技术的广度和深度,哪个优先? 可以简单类...
    松哥888阅读 2,885评论 0 3
  • 如果没记错是2019年1月初回到老家的,当时计划是回来找个老婆,找个专业系统的学习一下,挣点零花钱。 现在来看,好...
    Liu_f4db阅读 42评论 0 0
  • 改變自己 因為各種原因, 人總會有改變自己的想法, 不夠好的, 不夠滿意的, 想要改變得好, 即使已經很好很滿意,...
    自选未来创始人曹栩溪阅读 1,339评论 1 1
  • 能够清楚的感知内心,是一件多么重要的事情。 感恩朋友请吃午饭,细心体贴还会照顾别人 感恩能见到很久没有见面的同事,...
    爱眉小札夏大宝阅读 903评论 0 1