zoukankan      html  css  js  c++  java
  • 告别回调,拥抱async await

    之前使用jquery中ajax,请求的结果需要写在回调函数里面,后面接触到了axios/fetch,使用了es6中Promise进行封装,这种链式结构调用,看起来比之前直观,可是还是没有解决回调的问题,甚至axios/fetch相比原生ajax以及jquery中的ajax来说,不支持同步请求,这就导致:当一个请求需要的参数是依赖上一次请求返回的结果时,只能把第二次请求也写在第一次请求的回调里面,当内容过多时,就会被嵌套绕进去,写法上很不优雅。

      es7中的async await是一个不错的解决办法,配合try catch,代码简洁而优雅,跟回调说拜拜。

    对jquery中ajax的进一步封装:

    1.接口配置(dev: 开发,test:测试,prd:生产)

    const env = 'dev' // 使用哪个接口
    function useConfig() {
      let config = {
         dev: {
           ApiHost: 'http://10.0.0.0:3030',
           otherHost: '', // 设置多个接口
         },      
         test: {
           ApiHost: 'http://10.0.0.0:8080',
           otherHost: '', // 设置多个接口
         },
         prd: {
           ApiHost: 'http://10.0.0.0:9090',
           otherHost: '', // 设置多个接口
         }
      }[env]
         return config    
    }

    2.使用Promise封装ajax

    let apiMap = {
       login: ['POST', '/api/login'],
       getGoodList: ['GET',  '/api/getGoodList']
    }
    let config = useConfig()
    let tradeApi = {}
    for (let key in apiMap) {
      let api = apiMap[key]
      tradeApi[key] = function(params) {
        let options = {
          type: api[0],
          url: `${config.ApiHost}${api[1]}`,
          data: params   
        }
        return DoRequest(options)
      }
    }
    let ApiHost = 'http://10.0.0.0:3000'
    function DoRequest(options) {
      return new Promise((resolve, reject) => {
         $.ajax({
           type: options.type,
           url: options.url,
           data: Object.assign({}, options.data),
           crossDomain: true,
           dataType: 'json',
           success: (res) => {
             resolve(res)
           },
           error: (xhr, textStatus, errorThrown) => {
              reject(xhr, textStatus, errorThrown)
           }
         })
      })
    }

    3.调用

    tradeApi.getGoodList({pageNum: 1, pageSize: 10}).then(res => {
       console.log(res)
    }).catch(err => {
       console.log(err)
    })

    4.使用async await改写

    async function getList() {
      try {
              let data = await tradeApi.getGoodList({pageNum: 1, pageSize: 10})
            console.log(data)
          } catch(err) {
               console.log(err)
          }
    }
  • 相关阅读:
    mysql性能优化之索引优化
    提高mysql千万级大数据SQL查询优化30条经验(Mysql索引优化注意)
    MySQL高级-索引优化
    MySQL性能调优——索引详解与索引的优化
    通过force index了解的MySQL查询的性能优化
    Mysql 日期型,索引查询的问题
    mysql按日期分组(group by)查询统计的时候,没有数据补0的解决办法。
    SQL中Group By的使用
    GROUP BY 与聚合函数 使用注意点
    MYSQL GROUP BY Optimization
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/10117745.html
Copyright © 2011-2022 走看看