功能：当用户输入电话号码后，先查找这个电话号码所在的省和市，然后再根据省和市，找到可能充值的面值，进行展示

                
  1. //服务端代码
  2. const express = require('express');
  3. const app = express();// express.static 提供静态文件，就是html, css, js 文件
  4. app.use(express.static('./'));
  5. // 电话号码返回省和市，为了模拟延迟，使用了setTimeout
  6. app.post('/phoneLocation', (req, res) => {
  7.     setTimeout(() => {
  8.         res.json({
  9.             success: true,
  10.             obj: {
  11.                 province: '广东',
  12.                 city: '深圳'
  13.             }
  14.         })
  15.     }, 1000);
  16. })
  18. // 返回面值列表
  19. app.post('/faceList', (req, res) => {
  20.     setTimeout(() => {
  21.         res.json(
  22.             {
  23.                 success: true,
  24.                 obj: ['20元', '30元', '5元']
  25.             }
  27.         )
  28.     }, 1000);
  29. })
  30. app.listen(3010, () => {
  31.     console.log('server start');
  32. })
  1. <!--客户端代码-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Async/await</title>
  8.     <!-- CDN 引入vue 和 axios -->
  9.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  10.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  11. </head>
  13. <body>
  14.     <div id="app">
  15.         <input type="number" v-model.number="val">
  16.         <!-- 输入框区域 -->
  17.         <div style="height:50px">
  18.             <input type="text" placeholder="请输入电话号码" v-model="phoneNum">
  19.             <button @click="getFaceResult">确定</button>
  20.         </div>
  22.         <!-- 充值面值 显示区域 -->
  23.         <div>
  24.             充值面值：
  25.             <span v-for="item in faceList" :key='item'>
  26.                 {{item}}
  27.             </span>
  28.         </div>
  29.     </div>
  31.     <!-- js 代码区域 -->
  32.     <script>
  33.         new Vue({
  34.             el: '#app',
  35.             data: {
  36.                 phoneNum: '12345',
  37.                 faceList: ["20元", "30元", "50元"],
  38.                 val: ""
  39.             },
  40.             methods: {
  41.                 //获取到城市信息
  42.                 getLocation(phoneNum) {
  43.                     return axios.post('phoneLocation', {
  44.                         phoneNum
  45.                     })
  46.                 },
  47.                 // 获取面值
  48.                 getFaceList(province, city) {
  49.                     return axios.post('/faceList', {
  50.                         province,
  51.                         city
  52.                     })
  53.                 },
  54.                 // async方式
  55.                 async getFaceResult() {
  56.                     let location = await this.getLocation(this.phoneNum);
  57.                     if (location.data.success) {
  58.                         let province = location.data.obj.province;
  59.                         let city = location.data.obj.city;
  60.                         let result = await this.getFaceList(province, city);
  61.                         if (result.data.success) {
  62.                             this.faceList = result.data.obj;
  63.                         }
  64.                     }
  65.                 },
  66.                 // promise方式
  67.                 getFaceResult() {
  68.                     this.getLocation(this.phoneNum)
  69.                         .then(res => {
  70.                             if (res.data.success) {
  71.                                 let province = res.data.obj.province;
  72.                                 let city = res.data.obj.city;
  73.                                 this.getFaceList(province, city)
  74.                                     .then(res => {
  75.                                         if (res.data.success) {
  76.                                             this.faceList = res.data.obj
  77.                                         }
  78.                                     })
  79.                             }
  80.                         })
  81.                         .catch(err => {
  82.                             console.log(err)
  83.                         })
  84.                 }
  85.             }
  86.         })
  87.     </script>
  88. </body>
  90. </html>