关于loadScript函数,如果不返回正确的promise无法稳定返回1 2 3的顺序

来源:2-39 Then(异步操作)

狐七七

2020-01-12

在听课敲代码的时候发现,下面的方法,是没有办法稳定输出1 2 3的,多刷新几次发现,有1 3 2、2 1 3等顺序出现,说明这样写不只是语法不规范,而且是没有办法达到异步效果的。

function loadScript (src) {
    //resolve, reject是可以改变Promise状态的,Promise的状态是不可逆的
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.src = src
        script.onload = () => resolve(src) //fulfilled,result
        script.onerror = (err) => reject(err) //rejected,error
        document.head.append(script)
    })
}

loadScript('./1.js')
    .then(loadScript('./2.js'))
    .then(loadScript('./3.js'))

下面这个代码,会稳定输出1 但是后面可能是2 3 也可能是3 2。同样,因为返回了空的promise对象,所以异步也被打乱。

function loadScript (src) {
    //resolve, reject是可以改变Promise状态的,Promise的状态是不可逆的
    return new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.src = src
        script.onload = () => resolve(src) //fulfilled,result
        script.onerror = (err) => reject(err) //rejected,error
        document.head.append(script)
    })
}

loadScript('./1.js')
    .then(() => {
        loadScript('./2.js')
    }, (err) => {
        console.log(err)
    }).then( () => {
        loadScript('./3.js')
    }, (err) => {
        console.log(err)
    })

而后面的正确写法,稳定输出1 2 3,所以老师,是不是应该完全按照格式来写?

写回答

1回答

快乐动起来呀

2020-01-14

是的,then的参数是函数,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

0
1
狐七七
非常感谢!
2020-01-15
共1条回复

再学JavaScript ES(6-10)全版本语法大全

前端无门槛学习,从ES6到ES10,一套课程掌握JS最新语法

1182 学习 · 336 问题

查看课程