js异步编程

方式一：Promise

promise

Js中进行异步编程的新的解决方案（传统的解决方案——回调函数和事件），用于表示一个异步操作的最终完成 (或失败), 及其结果值.。

promise 有三种状态

Pending（进行中，初始状态，既不是成功，也不是失败状态。）、Resolved（已完成，又称 Fulfilled）、Rejected（已失败）

这三种状态的变化途径只有2种： 异步操作从 未完成 pending => 已完成 resolved 异步操作从 未完成 pending =>
失败 rejected 状态一旦改变，就无法再次改变状态，这也是它名字 promise-承诺 的由来，一个promise对象只能改变一次

promise解决地狱回调（能够保证接口按顺序调用）

// 先输出A, 再输出B

	searchData() {
	      this.getA()
	        .then( res => {
	          this.getB()
	        })
	    },
	getA() {
	      return new Promise((resolve, reject) => {
	        getAIPA()
	          .then( res => {
	          console.log('A')
	            resolve(res)
	          })
	          .catch( err => {
	            reject(err)
	          })
	      })
	    },
    getA() {
      return new Promise((resolve, reject) => {
        getBIPA()
          .then( res => {
          console.log('B')
            resolve(res)
          })
          .catch( err => {
            reject(err)
          })
      })
    },

Promise.all() ----every()

1.当所有promise对象状态都是成功状态才返回结果，只要其中有一个的对象是reject的，就返回reject的状态值。
2.promise.all中的子任务是并发执行的，适用于前后没有依赖关系的。
3.输出结果是按照promise对象的先后顺序输出的
4.适用场景：比如当一个页面需要在很多个模块的数据都返回回来时才正常显示，否则loading。

在这里插入代码片
```## 标题

```bash
let p1 = Promise.resolve(123);
let p2 = Promise.resolve('hello');
let p3 = Promise.resolve('success');


Promise.all([p1,p2,p3]).then(result => {
    console.log(result);
})

结果：
[ 123, ‘hello’, ‘success’ ]

Promise.race----(some())

1.Promise.race()意为赛跑的意思，也就是数组中的任务哪个获取的块，就返回哪个，不管结果本身是成功还是失败。
2.一般用于和定时器绑定，比如将一个请求和三秒的定时器包装成Promise实例，加入到Promise队列中，请求三秒中还没有回应时，给用户一些提示或相应的操作。

	let p1=new Promise((resolve,reject)=>{
	    setTimeout(()=>{
	            resolve('success');
	        }, 10000);
	});
	
	let p2=new Promise((resolve,reject)=>{
	    setTimeout(()=>{
	        reject('faild');
	    }, 500);
	});
	
	Promise.race([p1,p2]).then(res=>{
	    console.log(res);  
	}).catch(err=>{
	    console.log(err); // 返回的是faild
	})

方式二：async和await

async用于申明一个function是异步的，而await可以认为是async wait的简写，等待一个异步方法执行完成。
async-await寄生与Promise

• Demo

 created() {
    this.getTableList()
  },
  methods: {
    async getTableList() {
      this.jobTypes = await this.getData()
      this.jobRecordsByPage(this.onlyMyLog)
    },
	getData() {
	     return new Promise((resolve, reject) => {
	       // 加载工作类型
	       getDict({ key: 'jobType' })
	         .then(res => {
	           if (res.code === 0) {
	             resolve(res.data.values)
	           }
	         })
	         .catch(() => {
	           reject()
	         })
	     })
	   },
  }
 

async和await的异常捕获

一般我们会想到用 try/catch和then().catch()

//方法1: try / catch
async fn() {
    try {
        const res = await getData();
        console.log(res)
    } catch {
        console.log(err)
    }
}

// 方法2: then().catch()
async fn() {
    const res = await getData()
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.log(err)
                })
}

// 一般选择用如果有多个请求，则需要重复写try/catch，冗余代码，因此可以封装
test(fn) {
    return new Promise(async resovle => {
        try {
            let res = await fn;
            resolve([null, res]); // 对应【err, res】
        } catch(err) {
            resolve([err, null])
        }
    })
}