刚接触js的时候,小编以为js就是用来做交互和效果的,后来随着接手项目的增加,才知道js有更重要的用途就是用来前后端数据交互,说到数据交互,就少不了异步的问题,之前小编也有几篇文章是说异步操作的,今天,小编和大家一起探讨现在很流行的方案,也就是之前说的generator的语法糖——async和await解决方案。大家还可以关注我的微信公众号,蜗牛全栈。
一、基本用法
// 返回的Promise对象 async function foo(){ return "hello world" // Promise.resolve("hello world") } console.log(foo()) // Promise{<resolved>:"hello world"}
async function foo(){ let reslut = await "hello world" // await正常跟异步操作,这里只做演示 console.log(result) } foo() // hello world
function timeout(){ return new Promise(resolve => { setTimeout(() => { console.log(1) resolve() },1000) }) } async function foo(){ timeout() console.log(2) } foo() // 2 1s后 --> 1
function timeout(){ return new Promise(resolve => { setTimeout(() => { console.log(1) resolve() },1000) }) } async function foo(){ await timeout() console.log(2) } foo() // 1 2
二、与Promise对象callback结合:resolve里面的参数作为await的返回值
function timeout(){ return new Promise(resolve => { setTimeout(() => { // console.log(1) resolve(1) },1000) }) } async function foo(){ const res = await timeout() // resolve里面的参数作为await的返回值 console.log(res) // 1 console.log(2) } foo()
三、await必须在async函数内,就类似yield关键字必须在generator函数内部类似
function timeout(){ return new Promise((resolve,reject) => { setTimeout(() => { // console.log(1) // resolve(1) reject("fail") },1000) }) } async function foo(){ return await timeout() // await函数使用在async函数的里面 } foo().then(res=>{ }).catch(err => { console.log(err) }) // fail
四、再次封装ajax:通过封装原生ajax来实现功能(目录结构:在当前文件下存在一个static文件夹,文件夹内有三个文件a.json、b.json、c.json。每个文件内是一个对象,分别为{a:"我是a"}、{b:"我是b"}、{c:"我是c"})
// ajax.js function ajax(url, callback) { // 1、创建XMLHttpRequest对象 var xmlhttp if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest() } else { // 兼容早期浏览器 xmlhttp = new ActiveXObject('Microsoft.XMLHTTP') } // 2、发送请求 xmlhttp.open('GET', url, true) xmlhttp.send() // 3、服务端响应 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { var obj = JSON.parse(xmlhttp.responseText) // console.log(obj) callback(obj) } } } export default ajax // index.js import ajax from "./ajax" function request(url){ return new Promise(resolve => { ajax(url,res => { resolve(res) }) }) } async function getData(){ const res1 = await request("static/a.json") console.log(res1) const res2 = await request("static/b.json") console.log(res2) const res3 = await request("static/c.json") console.log(res3) } getData() // {a:"我是a"} {b:"我是b"} {c:"我是c"}
相信看到上面的实例之后,会对Vue的源码有一个更好的理解,今后的代码也会写的更优雅,更容易读,在维护的时候也会更容易,自己离前端攻城狮又近了一步。