ajax, axios, 同步和异步

Ajax和同步与异步

今日目标：
1.利用原生ajax发送get和post请求
2.利用axios发送get和post请求
3.同步和异步
01-Ajax概述【了解】

1. `概念`： async javascript and xml: 异步的js和xml
3. `优点`： 无刷新提交数据，用户体验好
5. `缺点`： 对网络SEO支持不友好
7. `工作原理【重点】`： 利用js一个的内置对象'XMLHttpRequest'，来实现对服务器端`发起异步请求`并`接收响应回来的数据`

复制代码

02-ajax发送get请求

1. `步骤`：
2. 1. 通过XMLHttpRequest这个构造函数创建实例对象
3. // 注意：这个实例对象负责发起请求，并接收数据
4. let xhr = new XMLHttpRequest()
6. 2. 通过xhr实例对象配置请求方式和请求地址
7. // 请求地址是由后端提供
8. xhr.open('请求方式', '请求地址?键名=键值&键名=键值...')
10. //token:::
11. // 携带这个请求头的目的是告诉服务器咱们已经登录了
12. //xhr.setRequestHeader('Authorization': localStorage.getItem('token'))
14. 3. 发起请求
15. xhr.send()
17. 4. 监听请求状态
18. xhr.onreadystatechange = function() {
19.     // 请求的状态如果等于4， 并且http状态码等于200
20.     if(xhr.readyState === 4 && xhr.status === 200) {
21.         // 数据响应成功，可以接收
22.         // 注意： 后端响应的数据是以字符串形式返回的，需要转换为对象格式
23.         let res = JSON.parse(xhr.responseText)
24.     }
25. }

复制代码

03-ajax发送post请求：onreadystatechange变乱

1. `步骤`：
2. 1. 创建实例对象。 负责发送请求和接收数据
3. let xhr = new XMLHttpRequest()
5. 2. 通过xhr实例对象配置请求方式和请求地址
6. xhr.open('请求方式', '请求地址')
8. 3. 配置请求头
9. // 调整发送给后端的参数的数据格式
10. // 以表单数据的格式来提交参数
11. // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
12. // 以json字符串的形式提交数据
13. // xhr.setRequestHeader('Content-Type', 'application/json')
14. // 默认值：不对参数格式进行处理，默认以是普通字符串
15. xhr.setRequestHeader('Content-Type', 'text/plain')
16. xhr.setRequestHeader('Content-Type', '提交给后端的数据格式')
18. 4. 发送请求
19. xhr.send('键名=值&键名=值...')
21. 5. 监听请求状态
22. xhr.onreadystatechange = function() {
23.     // 如果请求的状态等于4， 并且http状态码等于200
24.     if(xhr.readyState === 4 && xhr.status === 200) {
25.         // 数据响应成功
26.         // 注意：后端响应的数据是以字符串形式返回的，需要先转换成对象
27.         let res = JSON.parse(xhr.responseText)
28.     }
29. }

复制代码

03-ajax发送post请求：onload变乱

1. `步骤`：
2. 1. 创建实例对象。 负责发送请求和接收数据
3. let xhr = new XMLHttpRequest()
5. 2. 通过xhr实例对象配置请求方式和请求地址
6. xhr.open('请求方式', '请求地址')
8. 3. 配置请求头
9. // 调整发送给后端的参数的数据格式
10. // 以表单数据的格式来提交参数
11. // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
12. // 以json字符串的形式提交数据
13. // xhr.setRequestHeader('Content-Type', 'application/json')
14. // 默认值：不对参数格式进行处理，默认以是普通字符串
15. xhr.setRequestHeader('Content-Type', 'text/plain')
16. xhr.setRequestHeader('Content-Type', '提交给后端的数据格式')
18. 4. 发送请求
19. xhr.send('键名=值&键名=值...')
21. 5. 监听请求状态
22. xhr.onload = function() {
23.     // 如果请求的状态等于4， 并且http状态码等于200
24.     if(xhr.status === 200) {
25.         // 数据响应成功
26.         // 注意：后端响应的数据是以字符串形式返回的，需要先转换成对象
27.       let res = JSON.parse(xhr.responseText)
28.     }
29. }

复制代码

(封装ajax)

04-发送请求时的请求状态【了解】

1. 0: 请求未初始化
2. 1: 请求已建立
3. 2: 请求已接收
4. 3: 请求处理中
5. 4: 请求已完成

复制代码

05-常见的http的状态码【了解】

1. 网络传输协议规定的网络通信的码值：
3. 200： 服务器数据响应成功
5. 304： Not Modified 未修改. 本次请求的数据和上一次的一样。就直接从浏览器获取数据
7. 400： Bad Request 错误的请求。请求参数错误 本次的请求没有被服务器正确的解析
9. 401： Unauthorized 未授权。 没有权限访问这个接口。 一般用于登录验证
11. 403： Forbidden 拒绝访问。 不能访问这个接口
13. 404： Not Found 没有找到。 服务器地址，请求方式，参数没有写正确
15. 5XX/6XX； 服务器错误

复制代码

05-http传输协议【了解】

1. 1. 建立连接
2. 2. 发送请求
3. 3. 接收数据
4. 4. 断开连接

复制代码

06-axios

1. `概念`：基于Promise的一个http的网络通信的库
3. `引入axios库`： <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
5. `axios发送get请求的语法`
6. '方式一'：
7. axios.get('服务器地址?键名=键值&键名=键值...')
8.          .then(function(res){
9.     // res: 成功后后端响应的内容
10. }).catch(function(err){
11.     // err: 请求失败后的错误信息
12.     // 前后端通信没有成功
13. })       
15. '方式二'：
16. axios.get('服务器地址', {
17.     params: {
18.         属性名: 值,
19.         属性名: 值
20.     }
21. }).then(function(res){
22.    // res: 成功后后端响应的内容
23. }).catch(function(err){
24.     // err: 请求失败后的错误信息
25. })       
28. `axios发送post请求的语法`
29. axios.post('服务器地址', {
30.     属性名: 值,
31.     属性名: 值
32. }).then(function(res){
33.     // res就是通信成功后响应的内容
34. }).catch(function(err){
35.     // err: 通信失败后额错误信息
36. })
38. '注意：axios发送的post请求，默认是以json格式来提交参数'
39. '如果需要以表单数据格式来提交参数，需要使用qs库'
40. '使用'：
41. <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
42. axios.post('服务器地址', Qs.stringify({
43.      属性名: 值,
44.     属性名: 值
45. })).then(function(res){
46.     // res就是通信成功后响应的内容
47. }).catch(function(err){
48.     // err: 通信失败后额错误信息
49. })

复制代码

06-token：

1. `含义`：
2. 每一个接口都是无状态的，接口之间是没有关系的。
3.         => 问题： 当成功发起了登录请求后，登录成功后，登录成功的状态是不能影响到其他接口的
4.         => 解决思路： 让登录状态通知给所有的其他接口
5.     => 解决方案： 登录成功后，生一个具有唯一性，不可伪造的,具有有效期的特殊字符。将这个字符带给所有其他接口
6.             + 这个特殊字符就是token
8. `使用`：发送请求时，需要将token作为请求头信息，添加到请求报文里面
9. // 利用请求头携带token数据
10. ```js
11. xhr.setRequestHeader('Authorization',localStorage.getItem('token'))
12. ```

复制代码

07-同步和异步

1. `同步`： 代码从上往下依次执行，上面的没有执行完成，下面的不会执行。'会造成代码阻塞'
3. `异步`： 代码从上往下依次执行，遇到了异步，异步就会被跳过，等到所有的同步都执行完成之后，再依次执行异步。
5. `异步的3种情况`：
6. 1. 定时器
7. 2. 事件
8. 3. ajax请求：'实际开发中，我们需要关注ajax请求的响应顺序，但是ajax请求的响应顺序是不可控的'
10. `注意`：以上三种情况，本身是同步的，只有里面对应的回调函数才是异步
12. `规律`：有人的地方，就有江湖； 有异步的地方，就有回调函数
13. `回调函数`： 现在不调，回头调。满足了特定条件之后才会触发的函数。

复制代码

08-回调地狱

1. `问题`： '实际开发中，我们需要关注ajax请求的响应顺序，但是ajax请求的响应顺序是不可控的'
3. `解决`： 回调地狱
4.         => 回调地狱：如果接口之间有相互依赖的关系，可以将后面的接口写入前面接口的回调函数中，实现控制ajax请求的响应顺序。这种套娃现象就是回调地狱

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。