axios拦截器

什么是axios拦截器,为什么要使用拦截器?

我们通常使用axios与后台进行数据交互,axios是基于promise封装的库,可以运行在浏览器端和node环境中拦截器就是每一次的请求和响应,然后做相应的处理。请求拦截器它可以统一在你发送请求前在请求体里添加上tokne; 响应拦截器是在接收响应之后进行的一些操作,比如返回登录状态失效,需要重新登录的时候,就给它跳转到登录页面

axios官网:www.axios-http.cn/

axios特性:

拦截请求和响应
取消请求
转换json
客户端防御XSRF等

使用拦截器的原因:

若出现请求数多的情况下,我们将会用到axios的一个API 拦截器

页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,如果每个请求都附带后端返回的token,我们需要在拿到response之前loading动画展示等

拦截器的分类:

拦截器分为请求( request)拦截器和响应( response )拦截器

拦截器的使用:在请求或响应被then或catch处理前拦截它们

(请求拦截器)

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

举例:

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) { 
         // 判断是否存在 token, 如果存在的话, 则每个 http header 都加上 token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

(响应拦截器)

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

举例:

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除 token 信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)  
         // 返回接口返回的错误信息
    });

还比如说很多功能都需要和服务器交互,发送网络请求

上传头像,网络很慢,上传的文件很大

整个页面没有相应的状态

可以根据发送的请求来显示加载中 axios内置的拦截器代码功能在任意的请求

在发送请求前拦截处理一下显示加载中

在数据响应来拦截处理一下关闭加载中