用async await 优化回调地狱

74 阅读1分钟

// 目标: 使用Promise的链式调用解决问题 // 前提: axios函数在原地返回的就是一个Promise对象

axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    // 2. 获取某个省, 对应的城市列表
    pname = res.data.data[5];
    return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
}).then(res => {
    // 3. 获取某个市, 对应的地区列表
    console.log(res);
    let cname = res.data.data[0]
    return axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)
}).then(res => {
    console.log(res);
})

// 1. await必须用在被async修饰的函数内, 函数内无await, 则async可省略 // 报错: await is only valid in async functions // await后面一般跟Promise对象 // 如果跟的是非Promise对象, 则等待所有同步代码执行后, 把此结果作为成功的结果留在原地使用 // 如果是Promise对象, 则等待Promise对象内触发resolve返回成功结果, 在原地使用 // 目标: 使用Promise的链式调用解决问题 // 前提: axios函数在原地返回的就是一个Promise对象

用async await 优化回调地狱

  const provinces = await axios.get('http://ajax-api.itheima.net/api/province')
  const pname = provinces.data.data[5]
  const citys = await axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
  const cname = citys.data.data[0]
  const areas = await axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)
	return areas
}
f()