export default 和export :
javascript
myModule.js
//export default 只能出现一次,在引入的时候直接写,不用在花括号里面结构赋值
export default function defaultFunction() {
console.log('This is the default function');
}
export function anotherFunction() {
console.log('This is another function');
}
export const myVariable = 'This is myVariable';
// 另一个文件
import defaultFunc, { anotherFunction, myVariable } from './myModule';
defaultFunc(); // 输出:This is the default function
anotherFunction(); // 输出:This is another function
console.log(myVariable); // 输出:This is myVariable
场景:
在Vue项目里面,外部定义一个upload.js文件,在里面执行异步上传的upFile函数。在Fille.vue里面引用并接受函数返回值。
javascript
test.js
写法一 async 与 await:
const axios = require('axios');
export async function up(data) {
let result = await axios({
method: 'post',
url: `api接口`,
data: { eventNam: data },
headers: {
token: localStorage.getItem('token')
}
})
return result 需要在外部返回
}
写法二 new Promise:
const axios = require('axios');
export function up(data) {
return new Promise((resolve) => {
axios({
method: 'post',
url: `https://lendingapi-sit.dowsure.com/lending/event/add`,
data: { eventNam: data },
headers: {
token: localStorage.getItem('token')
}
})
.then(res => {
resolve(res.data)
});
})
}
写法三:
const axios = require('axios');
export async function up(data) {
let result = '' //获取函数返回值
await axios({
method: 'post',
url: `https://lendingapi-sit.dowsure.com/lending/event/add`,
data: { eventNam: data },
headers: {
token: localStorage.getItem('token')
}
})
.then(res => {
result = res.data
});
return result //获取函数返回值 需要在外部返回
}
javascript
File.vue
<el-button @click="getTest">调用异步函数</el-button>
import { up } from "@/api/test"
async getTest() {
let res = await up(111)
}