ajax/ 回调函数（回调地狱）

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
ps: 需要引入jQuery库

1. ajax 写法：

$.ajax({
            url: 'http://192.168.XX.XXX:9999/path1', //接口地址
            method: 'get',  //请求方式
            data:{
                username: 'wang',
                password: 'abcd'
            },
            dataType: 'json',
            timeout: 5000,  //超时事件
            success: function(res){
                console.log('请求成功',res)
                
                $("#box").html(res.title)
                $("#box2").html(res.code)

            },
            error: function(err){
                console.log('请求出错',err)
            }
        })

2. 回调函数：

function fun1(x,callback){
            var res = x
            var num = x*x
            var apple = 5-x
            callback(res)
            callback(num)
            callback(apple)
        }
        fun1(3,function(res){
            console.log('res',res+res)
        })

3. 回调地狱：

函数作为参数，进行层层的嵌套，被称之为回调地狱。因为层层的回调，所以很难直接的观察到正确的执行结果。

function fetch(fetchUrl,callback){
            $.ajax({
                url: fetchUrl,
                method: 'get',
                timeout: 2000,
                success: function(res){
                    callback(res)
                },
                error: function(err){

                }
            })
        }

        fetch('http://192.168.XX.XX:9999/path1',function(data){
            console.log('1111',data);
            fetch('http://192.168.XX.XX:9999/path2',function(data){
                console.log('222',data)
                fetch('http://192.168.XX.XX:9999/path3',function(data){
                    console.log('333',data)
                    fetch('http://192.168.XX.XX:9999/path4',function(data){
                        console.log('444',data)
                        fetch('http://192.168.XX.XX:9999/path5',function(data){
                            console.log('555',data)
                            fetch('http://192.168.XX.XX:9999/path6',function(data){
                            console.log('666',data)
                            })
                    })
                    })
                })
            })
        })

• 解决方法：

promise
await/async （语法糖）

• promise的三个状态：

function getPromise(){
  return new Promise((resolve, reject) => {
    
    if( //成功 ) {
       resolve(// 原本成功的回调)
    } else {
       reject(// 原本失败的回调)
    }

  })
}

• promise 的两个方法 then、catch:

getPromise().then(function (res) {
   console.log('res', res);
}, function err () {
   console.log('err', err)
}).catch( error => {
   console.log('error', error)
})

• Async/await:

async function fun () {

		await /** 异步操作 */
	
}


异步操作的结果是其本身，直接赋值即可
const result = await /** 异步操作 */

Async/await 其实是 Generator 的语法糖