异步编程笔记
程序员文章站
2022-03-26 21:05:05
环境:chrome 80 演习:用 `Generator`封装$.ajax Promise 第一次请求成功,接着请求第二次 多个请求全部成功,才执行下一步操作 多个请求,全部执行完毕后进行操作 Generator 第一次请求成功,接着请求第二次 多个请求全部成功,才执行下一步操作 ......
环境:chrome 80
演习:用promise
generator
封装$.ajax
promise
第一次请求成功,接着请求第二次
// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> let {log} = console; function request(url) { return new promise((resolve,reject)=>{ $.ajax({ url: 'http://rap2.taobao.org:38080/app/mock/251242'+url, success(res) { resolve(res) } }) }) } // 第一次请求 request('/example/1587179172695').then((res)=>{ log(res) return request('/getuserlist') // 第二次请求 }).then((res2)=>{ log(res2) // 请二次请求成功 }).catch((err)=>{ log(err) })
多个请求全部成功,才执行下一步操作
// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> let { log } = console; // 请求1 let p1 = new promise((resolve, reject) => { log('started one') resolve('one') }) // 请求2 let p2 = new promise((resolve,reject)=>{ log('started two') resolve('two') }) let all = promise.all([p1,p2]); //只要有一个请求resolve(),reject()都没有运行的话,下面的就不会运行 all.then((data)=>{ log(data) //['one','two'] p1,p2 全部成功后执行 },()=>{ log('fail') // 只要有一个失败,就执行这里 })
多个请求,全部执行完毕后进行操作
// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> let { log } = console; // 请求1 let p1 = new promise((resolve, reject) => { log('started one') reject('one') }) // 请求2 let p2 = new promise((resolve,reject)=>{ log('started two') resolve('two') }) let all = promise.allsettled([p1,p2]); //只要有一个请求resolve(),reject()都没有运行的话,下面的就不会运行 all.then((data)=>{ // p1,p2 全部运行后执行 log(data) //[{status: "rejected" reason: "one"},{status: "rejected" reason: "one"}] })
generator
第一次请求成功,接着请求第二次
// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> let {log} = console; function request(url) { return new promise((resolve,reject)=>{ $.ajax({ url: 'http://rap2.taobao.org:38080/app/mock/251242'+url, success(res) { resolve(res) } }) }) } (async ()=>{ try { // 第一次请求 let data = await request("/example/1587179172695") if (data) { // 第一次请求成功 log(data) let list = await request('/getuserlist') // 第二次请求 log(list); } } catch(e) { // 请求失败 log('fail') } })()
多个请求全部成功,才执行下一步操作
// 先引入jq <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> let {log} = console; function request(url) { return new promise((resolve,reject)=>{ $.ajax({ url: 'http://rap2.taobao.org:38080/app/mock/251242'+url, success(res) { resolve(res) } }) }) } (async ()=>{ try { // 第一次请求 let data = await request("/example/1587179172695") let list = await request('/getuserlist') let fulfilled = ![data,list].includes(null) if (fulfilled) { // 全部成功 log(data) log(list); } } catch(e) { // 请求失败 log('fail') } })()