es6模块导出循环依赖问题

1.循环依赖就是 A 模块引用了 B 模块,B 模块又引用了 A 模快,可能会导致数据加载不到
2.问题如下
1)在 api 中定义了一个登陆方法

import { UserState } from '@/types/store';
import request from './request';
import {MOCK_PREFIX} from '@/mock/index';
console.log(MOCK_PREFIX)
// 登录
export const LOGIN_URL = '/login';
export function login(data: any) {
    return request<UserState>({
        // 需要 mock 的时候就加上 mockPrefix
        url:  MOCK_PREFIX+LOGIN_URL,
        data,
        method: 'post',
    });
}

2)该方法会触发 mock 中的方法,然后 mock 中统一使用 api 中定义的路径

import Mock from 'mockjs'

export const MOCK_PREFIX: string = '/mock';
import {LOGIN_URL} from '@/api/user'
import { Response } from '@/types/api';
import { UserState } from '@/types/store'; 
const userMock = () => {
    console.log(LOGIN_URL)
    Mock.mock(RegExp(`${MOCK_PREFIX}+${LOGIN_URL}`), 'post', function (options: any) {

3)结构就是 mock 中的 url 是 undefined
在这里插入图片描述
4)原因是当加载 api 方法时,引用了 mock 中定义的 MOCK_PREFIX ,但是在 import mock 时就会执行 mock 中的 import 语句,而 mock 中的 import 语句又引用了 api 的变量,这个时候就出现了循环依赖,es6 会默认认为 api 已经引用完成了,不会去执行它的代码,但是 api 中只执行到了 import mock 语句,还没有执行定义变量,所以这个时候变量就是 undefined 了
3.es 6 的文档中有详细讲到这个问题
https://es6.ruanyifeng.com/?search=map&x=0&y=0#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值