一个js文件就是一个模块。
exprot 分别暴露:
如果想单独暴露出该 js 文件(模块)的某些变量,则可以使用 export 进行分别暴露。
// 获取floor数据
export const reqGetFloorList = ()=>{
return mockRequest({
url:'/floor',
method:'GET',
})
}
// 获取搜索模块数据 地址:/api/list 方式 post
// 当前接口给服务器传递的参数 params 至少是一个空对象
export const reqGetSearchInfo = (params)=>{
return requests({
url:'/list',
method:'POST',
data:params
})
}
// 获取验证码 /api/user/passport/sendCode/{phone}
export const reqGetCode = (phone)=>{
return requests({
url:`/user/passport/sendCode/${phone}`,
method:'GET'
})
}
也可以在末尾进行集中暴露:
export {reqGetFloorList, reqGetSearchInfo, reqGetCode};
通过export暴露出来的内容的引入方式:
import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js
)对外接口的名称相同。
如果想为输入的变量重新取一个名字,import
命令要使用as
关键字,将输入的变量重命名。
import { reqGetCode, reqRegister, reqLogin,reqUserInfo,reqLogout } from '@/api/index'
// 取别名
import { lastName as surname } from './profile.js';
export default 默认暴露:
其他模块加载通过 export default 暴露的模块时,import
命令可以为该匿名函数指定任意名字。
本质上,export default
就是输出一个叫做default
的变量或方法,然后系统允许你为它取任意名字。
正是因为export default
命令其实只是输出一个叫做default
的变量,所以它后面不能跟变量声明语句。
总结:
export命令对外接口是有名称的且import
命令从模块导入的变量名与被导入模块对外接口的名称相同,而export default命令对外输出的变量名可以是任意的,这时import
命令后面,不使用大括号。