- Javascript是一门：单线程，非阻塞，异步，并发的语言。
栈：有顺序，不可修改；
堆：没有做顺序排序（很乱），可以修改；
调用栈：自己调自己； - 举例：代码在什么时候运行变慢（耗时>异步）：DOM； HTTP请求；定时器；图片加载慢； 网络请求；
- 阻塞：指在在栈中储存很慢的东西；妨碍后面的代码出不去，都踢出去；
- 有什么办法解决阻塞：时间循坏，回调函数，异步回调（asynchronous）；
- 同步有异步解决方案
- 单线程：一个时间点只能执行一个线程/任务。
- 阻塞：下一条指令执行需要等待上一条指令完成。因为js中有一些执行耗时的指令。
- 异步：指浏览器解决js中耗时指令阻塞是问题的一种方法。这种方法主要通过构成分为：调用栈、webAPI、回调队列、事件循环。
- 同步:指令按程序执行顺序，每个操作等待上一条任务的执行。
浏览器解析机制构成
1.调用栈 - V8引擎的地盘
2.webAPI - 所有耗时的API都出现这里读秒
3.回调队列 - 异步完成后进入回调队列排队
4.事件循环 - 负责指挥回调 栈
JS语言的特点
单线程：一个时间点只能执行一条指令
非阻塞：让耗时的指令出栈，由浏览器处理
异步机制
| 同步JS | 异步JS |
|---|---|
| 指令按照程序中给定顺序执行 | 指令可以并行执行 |
| 每一个指令都必须等待上一个指令完成再执行 | 下一个指令可以在上一个指令执行的同时执行 |
| 大多时候，JS都作为同步执行 | 在执行某些特定的耗时指令时才发生异步 |
HTTP请求的状态码
xhr.redyState：存储的xhr对象生命周期状态
0：open()未调用
1：open()调用
2：服务器收到请求
3：处理中
4：处理成功
xhr.status：存储的是HTTP协议的状态码
200：请成功
300：请求跳转
400：请求失败
403：被禁止
404：未找到
xhr.statusText：存储的是HTTP协议的状态码文字描述
200：‘ok’
403：‘forbidden'
404：'page not found'
请求的监听事件
- readystatechange：当你希望捕捉请求对象的不同状态，那么就使用readystatechange
- Load：当你希望捕捉http的状态，那么就使用load事件 读音：ON得
- readystatechange && load：捕捉两种状态
示例：封装HTTP请求函数
<script>
const url = 'https://jsonplaceholder.typicode.com/todos'
//封装getData()函数
function getData(API, callback) {
const url = API
const xhr = new XMLHttpRequest()
xhr.addEventListener('load', () => {
if (xhr.readyState === 4 && xhr.status === 200) {
// console.log(JSON.parse(xhr.response));
const data1 = JSON.parse(xhr.response)
//请求数据成功时，捕捉成功数据，传给回调函数
callback && callback(data1, undefined)
} else {
// console.log(xhr.status, xhr.statusText);
//请求数据失败时，捕捉错误信息，传给回调函数
callback && callback(undefined, xhr.status)
}
})
xhr.open('GET', url)
xhr.send()
}
//getData()函数的调用
getData(url, function (successData, failData) { //successData成功拿到信息 failData错误
if (successData) {
//处理请求成功的数据
console.log(successData);
} else {
//处理请求失败的信息
console.log(failData);
}
})
</script>
回调地狱
<script>
const url = '1.json'
//getData()函数的调用
getData(url, function (successData, failData) { //successData成功拿到信息 failData错误
if (successData) {
//处理请求成功的数据
console.log(successData);
getData('2.json', function (successData, failData) {
if (successData) {
console.log(successData);
getData('3.json', function (successData, failData) {
if (successData) {
console.log(successData);
}
})
}
})
} else {
//处理请求失败的信息
console.log(failData);
}
})
// const url = '1.json'
// getData(url, function (successData, failData) {
// console.log(successData);
// getData('2.json', function (successData, failData) {
// console.log(successData);
// getData('3.json', function (successData, failData) {
// console.log(successData);
// })
// })
// })
</script>
Promise是什么?
- 意思："promise"译为“承诺”、”诺⾔“、”誓⾔“。
- Promise是ES6中引⼊的⼀个内置对象。
- new Promise()返回⼀个Promise对象。
- Promise 对象表示⼀个异步操作的最终结果(成功或失败)。
换⾔之，Promise对⽤⽤于处理异步操作，异步操作的结果可能是成功，也可能是失败。 - Promise:对象内部存储着⼀个暂时悬⽽未决的结果。
- promise两部分构成：第一部分：异步操作；第二部分：回调函数；
- Promise:的设计意图指在解决：异步操作的回调地狱问题。
- 解决promise的方法思路：分离异步操作和回调函数。
实现promise具体操作：
1.实例化promise对象；
2.在pormise构造函数的参数里传入异步操作；
3.在异步操作成功时，修改promise的状态（使用resolve）
4.在异步操作失败时，修改promise的状态（使用recjet）
5.为promise绑定回调函数的方法：promise.prototype.then()
If promise can speak, it seems to say:
I promise: whether the asynchronous operation succeeds or fails, there must be a result.
Promise { <state>: "fulfilled", <value>: "foo" }
<state>: "fulfilled"
<value>: "foo"
<prototype>:
Promise.prototype { … }
catch: function catch()
constructor: function Promise()
finally: function finally()
then: function then()
Symbol(Symbol.toStringTag): "Promise"
<prototype>: Object { … }
Promise()
- 定义:
Promise() 是⼀个构造函数，主要⽤于创建promise实例对象。
Promise()使⽤new调⽤，需要传⼊⼀个执⾏器函数(excutor)。 - promise对象有两个内部属性：
1.<state>:表示promise的对象状态：
- pending：默认值（悬而未决）。说明resolve或rejet未被调用；
- fulfilled：异步操作成功。说明resolvse已调用；
- rejrct：异步操作失败。说明reject已被调用；
2.<value>:
- 把成功的value的值绑定到promise对象；
- 把失败的错误值绑定到promise对象；
----
promise：消费
- 语法:
new Promise(excutor)
new Promise((resolve,reject) => {
//在这⾥定义你的异步操作
if (error) {
reject(error);
} else {
resolve(result);
}
})
excutor
- 定义：excutor是⼀个执⾏器函数。你的异步操作代码要写在excutor函数内部。
- new Promise()创建Promise对象时会⾃动调⽤“执⾏器函数”。
- 执⾏器函数的内部绑定了两个处理异步操作的回调函数，作为参数出现。
- 1.resolve(data): 函数参数，异步处理成功时，要调⽤resolve(data)回调，该函数会修改promise实例对象的状态和值：
state: fulfilled (状态：请求成功)
value: data (把异步操作的结果绑定到promise对象上)
- 2.reject(error): 函数参数，异步处理失败时，要调⽤reject(data)回调，该函数会修改promise实例对象的状态和值：
state: rejected (状态：请求失败)
value: data (把异步操作的错误信息绑定到promise对象上)
返回值：
new Promise()返回⼀个Promise对象。Promise对象有两个内部属性：
state(状态)：
pending:默认值
fulfilled：当resolve()被调⽤时
rejected：当reject()被调⽤时
result(结果)
undefined:默认值
value：当resolve(value)被调⽤时
error：当reject(error)被调⽤时
- excutor函数执⾏的最终结果，会改变promise对象的状态：
示例：fulfilled promise
Promise() + excutor + ⽣产代码(定时器)
let promise = new Promise(function(resolve, reject) {
//promise实例对象被创建时，excutor函数会⾃动调⽤
// 1秒后，⼯作成功完成，输出结果值：完成
setTimeout(() => resolve("完成"), 1000);
});
- 上⾯的代码执⾏后，发⽣两件事：
- 通过new Promise(),excutor函数会⾃动⽴刻调⽤。
- excutor函数接收两个参数：resolve 和 reject。这两个函数是JS引擎预定义的，我们不需要创建他们，我们
只需在适当的时候调⽤他们就可以了。⽣产代码运⾏1秒后， resolve('done') 被调⽤并输出结果值，这会
改变 promise 对象的状态。
- 示例：rejected promise
Promise() + excutor + ⽣产代码(定时器)
reject() 函数的调⽤，改变了 promise 对象的状态：
const promise1 = new Promise((resolve, reject) => {
//Promise内部存储着⼀个异步操作
setTimeout(() => {
resolve('foo');
}, 300);
});
// 在Promise的结果未确定之前，then()⽅法不会被调⽤。
//then()为promise绑定回调函数，与传统把回调函数当做参数不同
promise1.then((value) => {
console.log(value);// Expected output: "foo"
});
console.log(promise1);// Expected output: [object Promise]
promise.prototype.then()
- 定义:
promise.then() ⽅法⽤于绑定(处理Promise结果的)回调函数。在Promise的结果未确定之前， then() ⽅法不会被调⽤。 - 语法:
promise.then(successCallback,failureCallback)
- 返回值:
- 返回⼀个promise对象。
重点：
- 1.then方法什么时候调用：** then方法是一个异步，只当promise状态改变时会调用，不改变否则就不会被调用；
- 2. 默认返回一个没有状态的promise
- 3.如果手动设置了一个值：return data+'hello'那么这个值作为返回的promise的新值。
- 4.如果手动return了一个promise：reture promise。那么这个promise作为返回值的promise；
**
- 示例: Promise的链式调⽤
doSomething().then(function(result) {
return doSomethingElse(result);
})
.then(function(newResult) {
return doThirdThing(newResult);
})
.then(function(finalResult) {
console.log('Got the final result: ' + finalResult);
})
.catch(failureCallback);
- 示例：问题：
<script>
let a = 1
setTimeout(function(){
a = 10
},2000)
console.log(a)
</script>
- 示例：promise处理器函数的参数
<script>
const p1 = new Promise((resolve,reject) => { //参数：处理器函数
// 做⼀些异步操作
setTimeout(function(){
a = 10
// resolve() //⼿动设置 修改状态
reject() //失败状态
},2000)
})
//////////////promise.then()⽅法
p1.then(() => { //then()⽅法：设置回调函数 继续执⾏的任务。Promise.then() 有两个参数，⼀个是
成功时的回调，另⼀个是失败时的回调。两者都是可选的，因此您可以为成功或失败添加回调。
console.log(a)
}, () => {
console.log('失败了')
})
</script>
AJAX & Promise
<script>
const getData = (resource) => { //1.传⼊资源
return new Promise((resolve,reject) => {
const request = new XMLHttpRequest()
request.addEventListener('readystatechange', () => {
if (request.readyState == 4 && request.status == 200) {
const data = JSON.parse(request.responseText)
resolve(data)
} else if (request.readyState == 4) {
reject('请求数据失败')
}
})
request.open('GET', resource) //2.替换参数
request.send()
})
}
getData('data/1.json').then(data => {
console.log(data)
},(err) => {
console.log('promise 请求失败')
})
getData('data/2.json').then(data => {
console.log(data)
},(err) => {
console.log('promise 请求失败')
})
getData('data/3.json').then(data => {
console.log(data)
},(err) => {
console.log('promise 请求失败')
})
</script>
async
- 定义：async 关键字用于创建一个promise异步函数；
- 语法：
async function fn(){}
- 注意：#async和#await：返回是promise对象；区别：value值不一样；
await
- 定义：await 操作符用于计算（等待）一个异步操作的结果值；
Fetch API
fetch意思：获取
- fetch（）：是一个webAPI;
- fetch（）：是一个全局方法;（浏览器API）
- 定义：方法是一个基于'promise'发起http请求；
- 语法：
fetch(url)
fectch(url,options)
- options:传入一个选项对象，设置请求的细节。
- 返回值：返回一个promise对象；
- 实例一：
function getData() {
const url = 'https://jsonplaceholder.typicode.com/todos'
let request = fetch(url)
.then(response => response.json())
console.log(request);
}
getData()
/////////////////////使用async和await 如下：
async function getData() {
const url = 'https://jsonplaceholder.typicode.com/todos'
let request = await fetch(url)
.then(response => response.json())
console.log(request);
}
getData()
实例二：获取数据的⽅法1：then()⽅法的链式调⽤获取数据
const url = 'https://jsonplaceholder.typicode.com/todos'
let request = fetch(url)
.then(response => response.json())
.then(data => console.log(data))
实例三：获取数据的⽅法2：async和await获取数据
async function getData(url) {
let request = fetch(url)
.then(response => response.json())
console.log(await request);
}
getData('https://jsonplaceholder.typicode.com/todos')
花瓣网注册
- 图片
GET /photos/random - 数量
count：10
- 钥匙（开发Api->查看文件->）
ufKYMGggeVd5gg6m5i5sXMoJAe3buC5QmQKBrRE_dug
https://api.unsplash.com/photos/random?count=10&client_id=ufKYMGggeVd5gg6m5i5sXMoJAe3buC5QmQKBrRE_dug
