1.单线程模型
单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。
注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。
2.异步和同步
2.1同步
同步任务是指在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。我们可以理解就是能直接拿到结果的程序,比如我们去医院挂号,我们肯定会拿到结果在走,可以直接拿到结果.
2.2异步
异步就是不能直接拿到结果的,比如你去网红餐厅吃饭,你拿了叫的号码,就去玩了,到号了你在回来(称为回调),也可以10分钟问一下这叫轮询.
举例说明:
以AJAX为例
getJSON.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/5.json')
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.response)
//解析这个数据
const object = JSON.parse(request.response)
Myname.textContent = object.name
console.log(object)
}
}
request.send()
}
request.send()之后不会立马就打印出来request.response.而是等浏览器返回数据之后调用onreadystatechange函数才会打印出结果.
3.回调
回调函数是异步操作最基本的方法。
举例说明:
function f1() {
};
function f2(fn) {
fn()
}
f2(f1)
4.Promise 对象
4.1概述
Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地嵌套回调函数。
4.2Promise 对象的状态
Promise 对象通过自身的状态,来控制异步操作。Promise 实例具有三种状态。
异步操作未完成(pending)
异步操作成功(fulfilled)
异步操作失败(rejected)
上面三种状态里面,fulfilled和rejected合在一起称为resolved(已定型)。
这三种的状态的变化途径只有两种。
从“未完成”到“成功”
从“未完成”到“失败”
一旦状态发生变化,就凝固了,不会再有新的状态变化。这也是 Promise 这个名字的由来,它的英语意思是“承诺”,一旦承诺成效,就不得再改变了。这也意味着,Promise 实例的状态变化只可能发生一次。
因此,Promise 的最终结果只有两种。
异步操作成功,Promise 实例传回一个值(value),状态变为fulfilled。
异步操作失败,Promise 实例抛出一个错误(error),状态变为rejected。
4.3Promise 构造函数
JavaScript 提供原生的Promise构造函数,用来生成 Promise 实例
var promise = new Promise(function (resolve, reject) {
// ...
if (/* 异步操作成功 */){
resolve(value);
} else { /* 异步操作失败 */
reject(new Error());
}
});
上面代码中,Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己实现。
举例说明:
ajax = (method, url, options)=>{
return new Promise((resolve, reject)=>{
const {success, fail} = options
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
// resolve reject
if(request.status < 400){
resolve.call(null, request.response)
}else if(request.status >= 400){
reject.call(null, request)
}
}
}
request.send()
})
}
分析代码:
第一步
1.return new Promise((resolve,reject()=>{})
2.任务成功则调用resolve(result)
3.任务失败则调用resolve(result)
4.resolve和reject会再去调用成功和失败函数
第二步
使用.then(success,fall)传入成功和失败函数
异步与promise就大概介绍到这里,不足之处请大家包涵(我是萌新)
参考文章:https://wangdoc.com/javascript/async/promise.html(软一峰)
本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源.
网友评论