基于axios二次封装网络请求

基于axios二次封装网络请求

本套网络请求基于axios的二次封装，用到了vuex（断网及其他错误的标识）、vue-router（页面跳转）和element-UI的一些交互；封装采用模块化思想，各个文件的功能单一，大大降低了耦合性。

请求亮点：

1、可控制请求时loading的样式及是否需要显示loading；

2、请求错误时的统一提示

3、请求超时、断网、请求报错的统一处理

4、请求可以有多个域名

5、请求接口的统一管理

6、封装采用模块化思想

 

一、文件目录：

二、各文件介绍

1、/http/axios.js

 

import axios from "axios"
import httpCode from './httpCode';
import router from '../router/index';
import store from '../store/index';

//创建axios实例
var instance = axios.create({ timeout: 1000 * 20 });

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 登录流程控制中 根据本地是否存在token判断用户的登录情况
        const token = store.state.token;
        token && (config.headers.Authorization = token);
        return config;
    },
    error => Promise.error(error)
)

// 响应拦截器
instance.interceptors.response.use(
    // 请求成功
    res => {
        res.status === 200 ? Promise.resolve(res) : Promise.reject(res)
        //请求成功后改变network状态为true
        store.dispatch('changeNetwork', true);
    },
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            //请求已发出 不在2xx的范围
            httpCode(response.status)
            return Promise.reject(response);
        } else {
            //处理断网的情况 请求超时或断网时 更新state的network状态
            router.push({ path: '/network' })
            //请求失败后改变network状态为false
            store.dispatch('changeNetwork', false);
        }
    });

export default instance

2、/http/httpCode.js

import router from '../router/index';
import store from '../store/index';
import { Notification } from 'elemen