AJAX

Posted on

异步

  • 如果能直接拿到将结果

    那就是同步

    比如你在医院挂号，你拿到号才会离开窗口

    同步任务可能消耗 10 毫秒，也可能需要 3 秒

    总之不拿到结果你是不会离开的，这就是同步

  • 如果不能直接拿到结果

    那就异步

    比如你在餐厅门口等位，你拿到号后可以去干别的事比如逛街

    你可以每 10 分钟取餐厅问一下排到自己了没（轮询）

    也可以扫码用微信接受通知（回调）

异步举例

  • 以 AJAX 为例

    request.send() 之后，并不能直接得到 response

    用 console.log(request.response) 试试

    必须等到 readyState 变为 4 后，浏览器才会回头调用 request.onreadystatechange 函数

    我们才能得到 request.response

    这就跟餐厅给你发微信提醒的过程类似

  • 回调 callback

    你写给自己用的函数，不是回调

    你写给别人用的函数，就是回调

    request.onreadystatechange 就是写个浏览器调用的

    意思是你（浏览器）回头调用一下这个函数

  • 简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
getJSON.onclick = () => {
    const request = new XMLHttpRequest();
    request.open('GET', '/5.json');
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const object = JSON.parse(request.response);
            myName.textContent = object.name;
	        console.log(request.response);
        }
    }
    request.send();
    // console.log(request.resopne)
    setTimeout(() => {
        console.log(request.response);
        // 或者将 放在 request.onreadystatechange 函数中
    }, 2000)
}
// request.send()执行完，再执行 request.onreadystatechange 函数
// 执行顺序为 response.open() => respone.send() => request.onreadystatechange

onreadystatechange 执行两次

回调

写了却不调用，给别人调用的函数，就是回调。需自行意会

函数例子：

1
2
3
4
5
function f1() {}
function f2(fn) {
    fn()
}
f2(f1)

分析：

  1. 我调用 f1 没有？
  2. 我把 f1 传给 f2 （别人）了没有？
  3. f2 调用 f1 了没有？

答：1. 调用了。2.穿了。3.f2 调用了 f1。

那么，f1 是不是我写给 f2 调用的函数？ 是。

所以，f1 是回调。

例子2：

1
2
3
4
5
6
7
8
function f1(x) {
    console.log(x)
}
function f2(fn){
    fn('hello')
}
f2(f1)
// hello

fn(‘hello’) 中的 fn 就是 f1 。

fn(’hello‘) 中的 ’hello’ 会被赋值给参数 x 。

所以 x 就是 ‘hello’。

异步和回调的关系

  • 关联

    异步任务需要再得到结果时通知 JS 来拿结果

    怎么通知？

    可以让 JS 留一个函数地址给浏览器（电话号码）

    异步任务完成时浏览器调用该函数即可（拨打电话）

    同时把任务作为参数传给该函数（通知）

    这个函数是我写给浏览器调用的，所以是回调函数

  • 区别

    异步任务需要用到回调函数来通知结果

    但回调函数不一定只用在异步任务里

    回调可以用到同步任务里

    array.forEach(n=>console.log(n)) 就是同步回调

判断同步异步

如果一个函数的返回值处于

  • setTimeout
  • AJAX（即 XMLHttpRequest）
  • AddEventListener

这三个东西内部中，那么这个函数就是异步函数

还有其他 API 是异步的，遇到再说。

举例说明：

摇骰子, 随机打印出1-6 中的一个数

1
2
3
4
5
6
function 摇骰子() {
  setTimeout( () => { // 箭头函数
    return parseInt(Math.random() * 6) + 1;
  }, 1000)
  // return undefined
}

分析：

摇骰子（） 里没有写 return，那就是 return undefined

箭头函数里有 return，返回真正结果

所以这是一个异步函数/异步任务。

1
2
const n = 摇骰子();
console.log(n)

如何拿到异步结果？

用回调，写个函数，然后把函数地址给他

1
2
3
4
5
6
7
8
9
10
11
function f1(x) {
    console.log(x);
}
// 然后要求 摇骰子函数 得到结果后 把结果作为参数 传给f1
function 摇骰子(fn){
    setTimeout( () => {
        fn(parseInt(Math.random() * 6) + 1)
    }, 1000)
}

摇骰子(f1); // 结果

简化为箭头函数

1
2
3
4
5
6
7
8
9
10
11
function f1(x) { 
    console.log(x);
}
摇骰子(f1);
// 改为
摇骰子(x => {
    console.log(x);
});
// 再简化为
摇骰子(console.log);
// 如果参数个数不一致就不能这样简化，有个相关面试题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 面试题
const array = ['1', '2', '3'].map(parseInt);
console.log(array);
// 结果为 [1, NaN, NaN]
// parseInt('1', 0, arr) => 1
// parseInt('2', 1, arr) => NaN
// parseInt('3', 2, arr) => NaN

const array = ['1', '2' , '3'].map((item, i , arr) => {
   return parseInt(item)
});
console.log(array)
// 正确结果 [1, 2, 3]

// 简写 永远使用箭头函数
const array = ['1', '2', '3'].map((item) => parseInt(item));

异步总结

  • 异步任务不能拿到结果
  • 于是我们传一个回调给异步任务
  • 异步任务完成时调用回调
  • 调用的时候把结果作为参数

异步任务两个结果，成功或失败

两个方法解决

方法一：回调接受两个参数

1
2
3
4
5
6
fs.readFile('./1.txt', (error, data) => {
    if(error){
        console.log('失败'); return;
    }
    console.log(data.toString()) // 成功
})

方法二：两个回调

1
2
3
4
5
6
ajax('get', '/1.json', data => {/*成功回调*/}, error => {/*失败回调*/})
ajax('get', '/1.json',{
    success: () => {},
    fail: () => {}
})
// 接受一个对象，对象有两个 key 表示成功和失败

这些方法的不足

不管方法一还是方法二，都有问题

  1. 不规范，名称五花八门，有人用 success + error，有人用 success + fail，done + fail
  2. 容易出现==回调地狱== ，代码变得看不懂
  3. 很难进行错无处理

回调地狱举例

1
2
3
4
5
6
7
8
9
getUser( user => {
    getGroups(user, (groups) => {
        groups.forEach( (g) => {
            g.filter(x => x.ownerId === user.id)
            .forEach(x => console.log(x))
        })
    })
})
// 仅示例，这只是四层，二十层呢，代码会很难读
Snipaste_2021-09-25_22-12-10
吐槽回调地狱 来源网络

如何解决回调问题，用 Promise

有什么办法能解决这三个问题：

  • 会犯回调的名字或顺序
  • 拒绝回调地狱，让代码可读性更强
  • 很方便地捕获错误

1976年，Daniel P.Friedman 和 David Wis 俩人提出 Promise 思想

后人基于此发明了 Future、Delay、Deferred等

前端结合 Promise 和 JS，制定了 Promise/A+规范

该规范详细描述了 Promise 的原理和使用方法。

以 AJAX 的封装为例，来解释 Promise

Promise MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 示例
ajax = (method, url, options) => {
    const {success, fail} = option; // 析构赋值
    // const succes = option.success;
    // const fail = option.fail;
    const request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            // 成功就调用 success，失败 fail
            if (request.status < 400) {
                success.call(null, request.response);
            }else if (request.status >= 400) {
                fail.call(null, request, request.status);
            }
        }
    }
    request.rend();
}

ajax('get', '/xxx', {
    success(response){}, // function 缩写
    // success: function(response){}
    fail: (request, status) => {}
})

Promise 写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 先改一下调用姿势
ajax('get', '/xxx', {
    success(response){},
    fail: (request, status) => {}
})
// 上面用到了两个回调，还使用了 success 和 fail

// 改成 Promise 写法
ajax('get', '/xxx')
    .then((response)=>{}, (request, status)=>{} )
// 虽然也是回调
// 但是不需要经济 success 和 fail 了
// then 的第一个参数就是 success
// then 的第二个参数就是 fail

请问 ajax() 返回了个啥 ？

返回了一个含有 .then() 方法的对象呗。

那么再请问如何得到这个含有 .then() 的对象呢 ？

那就要改造 ajax 的源码了。

return new Promise((resolve, reject) => {})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 修改 ajax
ajax = (method, url, option) => {
    return new Promise((resolve, reject) => {
        const {success, fail} = option;
        const request = new XMLHttpRequest();
        request.open(methon, url);
        request.onreadystatechange = () => {
            if(request.readyState === 4) {
                if(request.status < 400) {
                    // 成功
                    resolve.call(null, request.response);
                }else if(request.status >= 400) {
                    // s
                    reject.call(null, request);
                }
            }
        }
        request.send();
    });
}

小结

第一步：

  • retrun new Promise((resolve, reject) => {...})
  • 任务成功则调用 resolve(result)
  • 任务失败则调用 reject(error)
  • resolve 和 reject 会再去调用成功和失败函数

第二步：

  • 使用 .then(success, fail)传入成功函数和失败函数

我们自己封装的 ajax 的缺点:

post 无法上传数据。request.send(这里可以上传数据)

不能设置请求头。request.setRequestHeader(key, value)

使用：

Jquery.ajax

axios(推荐)