axios拦截器封装步骤（含代码）

最近做项目时用到了axios拦截器封装，记录一下，相信以后还会用到，直接来复制粘贴（/阴险脸）。
先提供一个链接axios中文文档，看看API。我英语不好，你也是。

拦截器有请求前拦截，请求响应后拦截，自定义拦截器，移除拦截器，文档里太详细，我再写出来就是浪费流量。
关键的代码部分
惭愧，这个代码的请求和响应不是我写的，我只是站在巨人的肩膀上，所以看的更远。当初搜拦截器的时候看到了博主的帖子，写的简直不要太棒了。那么为了不辜负博主，我必须Ctr+C，然后到VS中Ctr + V。
这里我只说一下此项目我的文件结构，真正要用还是进上面的链接去看那位博主的代码。
在“油条”下新建request文件夹，再下面放的就是http.js，里面就是封装的拦截器了。顺便把axios.get()和axios.post()两个方法封装一下暴露出去。（后悔当初没有把文件结构做的再模块一些）

在http.js里粘贴如下代码：

import axios from 'axios'

axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 一些错误状态码的处理
const errHandle = (status) => {
    switch (status) {
        // 请求不存在
        case 404:
            tip('请求的资源不存在');
            break;
        // 其他原因    
        default:
            console.log("other reasons")
    }

}

// 请求拦截器
axios.interceptors.request.use(
    // 查看本地是否有token,有token就带过去
    config => {
        // console.log(config)
        if (localStorage.getItem('token')) {
            config.headers['x-user-token'] = localStorage.getItem('token')
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

// 响应拦截器
axios.interceptors.response.use(
    // res=>console.log(res),
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
    err => {
        errHandle(err)
        return Promise.reject(err.status)
    }
)

// 封装get
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(
            res => {
                resolve(res)
            }
        ).catch(
            err => {
                reject(err)
            }
        )
    })

}

// 封装post
export function post(url, data) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            res => {
                resolve(res)
            }
        ).catch(
            err => {
                reject(err)
            }
        )
    })

}

下一步就是项目里要用到的Api。我在src下新建api文件夹，

里面放的是各个组件要用到的请求数据的api。先把http.js下封装的get和post引进来，定义方法使用post/get请求数据。
举个栗子（我用post）：

import { post } from '../util/request/http'
export const getNewsList = (currentPage, pageSize) => {
    return post(newsListUrl, {
        "current": currentPage,
        "pageSize": pageSize
    }).then(
        res => {
            return Promise.resolve(res)
        }
    ).catch(err => {
        return Promise.reject(err)
    })
}

最后就可以在组件里愉快地使用getNewsList进行数据获取，然后渲染到DOM了。篇幅过长我就不想写了。
－－－－－－－－－－－－－－－－－－－END－－－－－－－－－－－－－－－－－－－－－－