vue 中 axios 全局配置

青旅半醒 2021-09-19 08:22 535阅读 0赞

在请求接口的时候做全局处理, 便于管理和维护

axios 全局配置 base.js

import axios from "axios";
    import qs from "qs";
    import router from "@/router";
    import {
        EventUtil
    } from '@/common';
    
    const instance = axios.create({
         baseURL: process.env.NODE_ENV === "development" ? "/api" : "" //开发环境api代理
         timeout: 1000,  //延迟时间
    });
    
    // 拦截器
    instance.interceptors.request.use(
        function (config) {
            //在发送请求之前做某事
            if (config.formData === undefined) {
                config.formData = true;
            }
            if (config.formData === true && config.method.toLowerCase() !== "get") {
                if (config.headers['Content-Type'] && config.headers['Content-Type'] === 'application/json') {
                  config.data = JSON.stringify(config.data);
                } else {
                  config.data = qs.stringify(config.data);
                }
            }
            return config;
        },
        function (error) {
            //请求错误时做些事
            return Promise.reject(error);
        }
    );
    
    // 拦截器,响应数据
    instance.interceptors.response.use(
        function (response) {
            //对响应数据做些事
            let {
                data
            } = response;
            if (data.code === "200") {
                return data;
            } else if (data.code === "401") { // 未登录
                if (location.hash !== "#/login") {
                    sessionStorage.setItem("intention", location.hash);
                }
                if (EXTEND_CONFIG.to_login) {
                    router.replace("/transfer");
                } else {
                    // router.replace("/login");
                }
                return Promise.reject("需要登录或注册");
            } else if (data.code === '150') { // 初始密码
                if (location.hash !== "#/login") {
                    sessionStorage.setItem("intention", location.hash);
                }
                router.push({
                    name: 'initPwd'
                });
            } else if (data.code === '10') { // 验证登录
                return data;
            } else if (data.code === '201') { // 开通会员
                router.push({
                    name: 'openMember'
                });
            }
    
            return Promise.reject(data.msg);
        },
        function (error) {
    
            //请求错误时做些事
            let errorStr = error + "";
            if (errorStr.includes("timeout")) {
                return Promise.reject("连接超时，请稍后重试");
            } else {
                if (window.navigator.onLine == true) {
                    let {
                        response: {
                            status,
                            statusText
                        },
                        message
                    } = error;
                    if (status === 404 || status === 500) {
                        message = "未能连接服务器，请稍后重试";
                    }
                    return Promise.reject(message);
                }  else {
                    return Promise.reject('网络连接不可用,请稍后再试...');
                }
            } 
          
        }
    );
    
    export default instance;

断网提示 (不需要的忽略)

import {Toast} from 'mand-mobile';
    // 检测断网 
    let EventUtil = {
        addHandler: (element, type, handler) => {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler;
            }
        }
    };
    EventUtil.addHandler(window, 'online', () => {
        Toast.info('网络连接已恢复');
    });
    EventUtil.addHandler(window, 'offline', () => {
        Toast.info('网络连接已断开');
    });
    
    export {EventUtil};

入口api 清单  access.js

import axios from "./base";
    // 注册
    export const register = data =>
        axios({
            url: "/account/register",
            method: "post",
            data
        });
    
    //登录
    export const login = data =>
        axios({
            url: "/account/login",
            method: "post",
            data
        });

组件内使用

import {login} from "@/api/access";  //引入
    
    //methods 中使用
    
    async toLogin() {
                    let data = {
                        username: this.mobile, //用户名
                        code: this.authCode  // 验证码
                    }
                    try {
                        let res = await login(data);
                        // 登录成功要做的事
                    } catch (e) {
                        // 登录失败要做的事
                       console.log(e)
                    }
                  }