0%

回看 promise

发表于 更新于

callback

一个函数在另一个函数中调用

1
2
3
4
5
function fn1(){}
function fn2(fn){fn()}
fn2(fn1)//这就是回调
//call a function
//callback a function

回调地狱

回调的嵌套多余 5 层的时候，你就会发现看不懂了…

1
2
3
4
5
6
7
8
9
10
11
12
writeCode('', css1, () => {
  creatPaper(() => {
    writeCode(css1, css2, () => {
      writeMarkdown(md, () => {
        writeCode(css1+css2, css3, () => {
          document.querySelector('#paper .content').innerHTML = marked(md);
          console.log('over')
        })
      })      
    })
  })
})

这是我在我的一个项目中使用的代码，可读性为负

忒酸爽

为了解决回调地狱，以及在不同的库使用回调的方式是未知的需要去记

所以就来了 Promise

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function get(){
  return new Promise(function(resolve, reject){
    resolve('zhaoyang')
  })
}

function print(info){
  return new Promise(function(resolve, reject){
    console.log(info)
    resolve()
  })
}

function getanother(){
  return new Promise(function(resolve, reject){
    resolve('bamax')
  })
}

get().then(print).then(getanother).then(print)

promise 三大金刚 then resolve reject

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(url, onsuccess, onerror){
  return new Promise((resolve, reject) =>{
    let xhr = new XMLHttpRequest()
    xhr.open('Get', url, true)
    xhr.onload() = function(){
      resolve(this.responseText)
    }
    xhr.onerror =()=>{reject('err')}
  })
}
function log(name, password){
  return ajax('/log',{name, passname})
}
log('sb','sbsbsb').then(ret=>{
  
}).catch()

Generator

ES6 提供的异步编程解决方案

阮一峰

感觉自己还不能很好地讲出来

yield next()