JS中如何改造同步ajax方法变为异步并让函数返回值保持为请求结果?

原函数如下,为jQuery的ajax请求,设置了async为false即为同步请求。

// utils.js
function getOptions() {
  let options = {}

  $.ajax({
    url: api.getOptions,
    dataType: 'JSON',
    type: 'get',
    async: false,
    success(res) {
      options = res.data
    },
    error(err) {
      // 提示错误
    },
  })

  return options;
}

// 业务代码中
import { getOptions as OPTIONS } from "../utils.js"
// ...
this.options = OPTIONS.typeOptions

在业务代码中,有非常多如上所示的函数使用方法,需要的是该函数直接返回的是请求的结果。

目前有需求需要将项目中的这个同步请求改造为异步请求,即去除async: false。
有没有什么方法能够让这个函数中的请求改造为异步后,维持直接返回请求结果。

我有尝试过使用async/await,但async函数返回的是Promise对象,需要在使用返回值的地方也进行改造,改造成本非常大。
所以来问问各位大佬有没有什么好办法?

回复
阅读 625
1 个回答

稍微改写一下你的 getOptions 方法就好了,大概如下:

// utils.js
function getOptions() {
  return new Promise((resolve,reject)=>{
    $.ajax({
      url: api.getOptions,
      dataType: 'JSON',
      type: 'get',
      async: false,
      success(res) {
        resolve(res.data)
      },
      error(err) {
        // 提示错误
        reject(err)
      },
    })
  })
}

这样的话,你的业务代码中就可以变更为 this.options(params).then(res=>{...}) 去使用了。或者搭配使用 async/await

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏