javascript异步编程

1. 在 JavaScript 常见的异步代码是什么?

• 定时器
• Ajax

2. 回调函数

封装：
function request (url, callback) 
{ 
	var oReq = new XMLHttpRequest(); 
	oReq.addEventListener("load", function () { 
		callback(this.responseText)}); 
		oReq.open("GET", url); oReq.send(); 
	}
	
使用：
request('路径', function (data) { // 其它逻辑 })

3. 基于回调函数的异步流程控制

request('http://jsonplaceholder.typicode.com/posts', function (data) {
	console.log('2 posts 的响应结果') // 请求下一个 
	request('http://jsonplaceholder.typicode.com/users', function (data) { 
		console.log('3 users 的响应结果') 
		request('http://jsonplaceholder.typicode.com/comments', function (data) { 
			console.log('4 comments 的响应结果') 
				}) 
			}) 
		})
// 当我们要控制异步代码流程的时候，就会有回调地狱的情况
当我们要控制异步代码流程的时候，会出现如下图所示的代码：回调地狱

Promise

promise是ES6中新增的一个构造函数,帮我们简化异步代码,使其更易读,容易阅读,维护
尤其是在想控制多个异步函数的时候,promise即可发挥真正的价值;
我们一直在使用 axios，其实就是封装的 Promise;

概念简介

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。
所谓 Promise ，简单说就是一个容器，里面保存着异步操作。从语法上说，Promise 是一个对象，从
它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此
外， Promise 对象提供统一的接口，使得控制异步操作更加容易。
Promise 也有一些缺点。首先，无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。其
次，如果不设置回调函数， Promise 内部抛出的错误，不会反应到外部。第三，当处于 pending 状态
时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

创建promise对象

const p1 = new Promise ((resolve,reject) => {
// 执行一个异步操作
    resolve()
    reject()
})

p1.then(() => {
    console.log("正常执行完毕")
    //在异步函数中调用resolve就相当于该函数
}),() => {
	console.log("发生异常")
    //在异步函数中调用reject就相当于该函数
}
// Promise中可传递两个参数: resolve成功 || reject失败`

promise对象有一个方法: .then
function PsetTime(time) {
  return new Promise((resolve , reject) => { 
    setTimeout(() => {
      resolve()
    }, time);
  })
}
PsetTime(1000).then(()=>{
  console.log("定时器执行了1s")
  return PsetTime(2000).then(()=>{
  console.log("定时器3s后执行了")
  return PsetTime(1000).then(()=>{
  console.log("定时器4s后执行了")
  })
 })
})
//promise可以在then方法中return自身,然后不断.then下去,原因是then方法执行后,会返回一个新的promise对象

# 例如: 
request('http://jsonplaceholder.typicode.com/posts')
    .then(data => {
     console.log(1)
     return 'hello'
    # 隐式return一个新的promise对象
    `return new Promise((resolve)=>{
    resolve('hello')
	})`
//如果return数据的话,那么then中会将return的这个数据隐式创建一个promise对象,在这个promise对象中使用resolve将这个数据传递给then,因为在promise中then和resolve是紧密相关的,而这段promise是在then内部隐藏的,不会有任何显示
})
//这个then中的link形参获取到上一级then传递的实参
.then((data)=>{
// 这里的data打印出来就是hello
  console.log(2,data)
})
  .then(()=>{
  console.log(3)
})

// promise其他方法
.catch(err=>{
    console.log('失败请求',err)
})
.finally(() => {
	console.log('无论成功或失败都会执行')    
})

Async函数

简化了promise的调用,本质上还是promise; 可以说是语法糖

async function main(){
# async函数始终返回promise,如果返回值是普通数据,那么内部就会将返回值包装到promise对象中,数据就是resolve的结果

const data = await request('http://jsonlaceholder.typicode.com/posts')
# await简化了获取promise结果,使用promise的获取结果需要.then,而使用await的话,直接就可获取
// request('http://jsonlaceholder.typicode.com/posts')
//   .then(data => {
//      console.log(data)
//  }) 
    console.log(data)
}
main() 

任何函数都可以被标记为async函数

具名函数: async function main(){}
匿名函数: async function (){}
箭头函数: async () => {}
对象函数成员简写: 
const user ={
    say: async function(){}
    async say (){}
	say: async () => {}
}

async函数异常处理

使用await会得到promise对象的返回结果,如果不使用则直接拿到promise对象本身

在async函数中捕获异常: 

async function main(){
    // 使用try可以捕获所有的await异常;但是try不能捕获.then的异常
    try{
    const data = await request('正确的请求路径')
    console.log(1)
        // 在try-catch中,如果捕获到代码异常,.那么代码即刻停止往下执行,直接进入catch
    const data2 = await request('错误的请求路径')
    console.log(2)
    }catch(err){
        console.log('请求失败',err)
    }
}
// await必须标记所属函数,不能再其他函数与async对应