vue拦截器的使用（萌新怕不懂的看过来）

曾经终败给现在 2023-02-11 07:29 23阅读 0赞

由于我是第一次使用这个东西，我看到拦截器这个高大上的名字就感觉到害怕，所以做了这么多项目也怕接触这个东西，现在想到接口要进行处理，并且集中放置，所以利用了最近刚学的番茄时钟工作法，开了一个番茄，告诉自己就弄这么一会就好了。好吧，硬着头皮上，慢慢地，耐心地终于看出了点眉目。记录一下方便大家。

> 第一步：这里总共有5个文件

![在这里插入图片描述][20200522142051228.png]  
第一个是引用位置  
第二个是拦截器的内容放置位置  
第三个是所有api请求集中放置的位置  
第四个是vue引入外部js的位置  
第五个是config目录下处理跨域请求的位置

> 第二步：正题如下

> （1）http.js的文件内容：

/*
     * @Author: your name
     * @Date: 2020-05-21 18:29:06
     * @LastEditTime: 2020-05-22 14:14:28
     * @LastEditors: Please set LastEditors
     * @Description: In User Settings Edit
     * @FilePath: \banzou\static\js\http.js
     */
    import axios from 'axios';
    
    // axios 配置
    var instance = axios.create({
        headers: {
            'Content-Type': 'application/json',
        },
        timeout: 30000,
        baseURL: '/api',   //接口请求地址，这里要注意，我们要写入跨域请求重写的url内容
    })
    
    //拦截重复请求
    let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
    let cancelToken = axios.CancelToken;
    let removeRepeatUrl = (config) => {
        let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
        for (let p in pending) {
            if (pending[p].u === config.url + '&' + config.method + '&' + comValue) { //当前请求在数组中存在时执行函数体
                pending[p].f();         //执行取消操作
                pending.splice(p, 1);   //把这条记录从数组中移除
            }
        }
    }
    let saveRepeatUrl = (config) => {
        let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
        console.log(comValue)
        config.cancelToken = new cancelToken((c) => {
            pending.push({ u: config.url + '&' + config.method + '&' + comValue, f: c });  // 自定义唯一标识
        });
    }
    
    // 添加请求拦截器
    instance.interceptors.request.use(config => {
        // 在发送请求之前做些什么，比如传token
        // removeRepeatUrl(config);       //在一个ajax发送前执行一下取消操作
        // saveRepeatUrl(config);         //保存请求地址
        return config
    }, error => {
        // 对请求错误做些什么
        console.log(error) // for debug
        return Promise.reject(error);
    })
    
    // 添加响应拦截器
    instance.interceptors.response.use(response => {
        // removeRepeatUrl(response.config);        //执行取消操作，把已经完成的请求从pending中移除
        // 对响应数据做点什么
        const res = response.data;
        //对错误代码做处理
        return response;
    }, error => {
        // 对响应错误做点什么
        console.log('err' + error)// for debug
        return Promise.reject(error);
    });
    
    export default instance;
    
    /**
     * post 请求方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function post(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.post(url, data).then(response => {
                //对接口错误码做处理
                resolve(response.data);
            }, err => {
                reject(err);
            })
        })
    }
    
    /**
     * get 请求方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function get(url, data = {}) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                params: data
            })
                .then(response => {
                    resolve(response);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    
    /**
     * 封装所有请求
     * @param methed
     * @param url
     * @param data 
     * @param headers
     * @returns {Promise}
     */
    export function request(methed, url, data = {}, headers) {
        return new Promise((resolve, reject) => {
            instance({
                method: methed || 'post',
                url: url,
                params: methed === 'get' ? data : '',
                data: methed !== 'get' ? data : '',
                headers: headers || { 'Content-Type': 'application/json' },
            })
                .then(response => {
                    //对接口错误码做处理
                    resolve(response.data);
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

> （2）api.js的内容

import { request } from './http'
    //用户登录接口
    export function Banner(data) {
        return request('get', '/api.php', {
            mod: 'index',
            extra: 'ads',
            ads_cid: 1
        });
    }

> （3）main.js的内容

import {post} from '../static/js/http';
    Vue.prototype.$post = post;

> （4）index.js的内容

proxyTable: {
          '/api': {
            target: 'http://20200302.demo.hugelem.cn', //后端接口地址
            changeOrigin: true, //是否允许跨越
            pathRewrite: {
              '^/api': '/api', //重写,
            }
          }
        },

> index.vue中的使用

import {Banner} from '../../static/js/api';
    mounted() {
       Banner({}).then(res => {
         console.log('出来吧',res);
       })
     },

整个的操作流程就是这样走向的，  
首先大伙要硬着头皮看一下http.js的内容，其实我也就看了一下下面的post和get,request的请求内容，  
看得差不多了，就在main.js里面引入，  
再次，我们就在api.js里面引入这个request的请求来统一放置请求接口的位置，  
最后我们把接口名称暴露出去，在index.vue里面引入并使用即可。  
[这是原作者给我的启发的链接，大家也可以参考一下][Link 1]

[20200522142051228.png]: https://img-blog.csdnimg.cn/20200522142051228.png
[Link 1]: https://www.jianshu.com/p/dacbefd62e29