vue接口请求方式axios二次封装

突然想整理一下vue方面的存储知识

安装axios

npm install axios --save-dev

封装

现在开始准备封装一下了。。。

api.js

import axios from 'axios';
import { LoadingBar } from 'iview';
let service = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? 'https://www.easy-mock.com/mock/5c134a301ed4e34c5e13471b/api' : ''
});
// 请求拦截
service.interceptors.request.use(
    config => {
        return config
    },
    err => {
        return Promise.reject(err)
    }

);
// 返回拦截
service.interceptors.response.use(
    response => {
        return response.data
    },
    err => {
        return Promise.reject(err)
    }
);
export default service

复制代码

• 根据官方的实例create一个实例
• 根据NODE_ENV判断是开发环境或者是生产环境，进行baseURL的切换

---

到这边你就可以在项目中愉快的发请求了，不过你以为到这边就结束，怎么可能呢

---

config设置

需求：

• 对基准url设置，方面我们自己baseURL
• 对请求时间要一定限制，我一般设置成5s
• 对即将发送的请求头进行设置
• 跨域的时候是否需要使用凭证

let service = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? 'https://www.easy-mock.com/mock/5c134a301ed4e34c5e13471b/api' : '',
    timeout: 5000,
    headers: {'Content-Type': 'application/json'},
    withCredentials: true
});
复制代码

当然还有更多的设置，根据项目的需求配置，可以加快自己的开发速度。

封装的一个思路： 1、进入请求拦截器时，打开加载进度条（LoadingBar），在错误或者成功的时候关闭该组件； 2、使用axios取消请求来去除重复请求（创建一个请求队列，每次成功接收到返回值后，去除该队列中的该值，如果该接口还未成功，这时又进来一个相同的接口，使用axios取消请求的方式去除队列中的上次接口） 3、封装axios的方法，在api中统一处理异常

请求拦截

// 请求队列
let queue = [];
let CancelToken = axios.CancelToken;
let distroy = (config, flag = 'req') => {
    for (let i in queue) {
        if (`${config.url}&${config.method}` === queue[i].key || `${config.url}&${config.method}` === `${config.baseURL}${queue[i].key}`) {
            if (flag === 'req') {
                queue[i].cancel('取消请求');
            }
            queue.splice(i, 1);
        }
    }
}

复制代码

在写distroy该方法时，遇到request拦截器与response拦截器的config.url不同（区别是一个包含baseURL，一个不包含）。

// 请求拦截
service.interceptors.request.use(
    config => {
        distroy(config);
        if (!queue.length) {
            LoadingBar.start();
        }
        config.cancelToken = new CancelToken(function executor(c) {

                queue.push({
                    key: `${config.url}&${config.method}`,
                    cancel: c
                })
        });
        return config
    },
    err => {
        LoadingBar.error();
        return Promise.reject(err)
    }

);
复制代码

返回拦截

// 返回拦截
service.interceptors.response.use(
    response => {
        distroy(response.config, 'res');
        if (!queue.length) {
            LoadingBar.finish();
        }
        return response.data
    },
    err => {
        LoadingBar.error();
        return Promise.reject(err)
    }
);
复制代码

异常统一处理

取消接口的时候，控制台会出现图片中的报错，需要对接口进行统一处理

export default {
    get: (url,config) => service.get(url, config).then(res => res).catch(err => console.log(err)),
    delete: (url,config) => service.delete(url, config).then(res => res).catch(err => console.log(err)),
    post: (url,data,config) => service.post(url, data, config).then(res => res).catch(err => console.log(err)),
    put: (url,data,config) => service.put(url, data, config).then(res => res).catch(err => console.log(err)),
    patch: (url,data,config) => service.patch(url, data, config).then(res => res).catch(err => console.log(err))
}
复制代码

转载于:https://juejin.im/post/5c13503ae51d45485a098808