欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS async/await-ajax异步请求等待返回数据

程序员文章站 2024-01-25 20:31:28
...

JS async/await-ajax异步请求等待返回数据

  • 例子使用的是 axios 做ajax请求
  • 在vue中使用

定义方法

  • 主要是在普通的方法中返回 Promise
// 应用自定义了封装了一些内容axios
import Axios from '../axios'

// 这个对象是为了方便暴露出去
const ajax= {
// 定义一个普通方法
  get: (url) => {
    //主要内容在这里 在方法中返回一个Promise
    // 使用Promise的resolve返回需要异步获取的对象即可
    return new Promise((resolve, reject) => {
      Axios ({
        method: 'get',
        url: url
      }).then(response => {
        // 成功返回
        resolve({data: response.data})
      }).catch(error => {
        // 失败返回
        resolve({data: error})
      })
    })
  }
}

export default {
  ...ajax
}

使用

  • 主要使用async/await关键字
  • 定义方法使用async 修饰方法
  • 调用方法使用await修饰 (前提是调用的方法必须是放回Promise)
import ajax from '../commonJs/ajax'

  async goodsCategoryData() {
      // 使用异步请求获取返回数据
      let data = await ajax.get('/goods')
      console.log('测试独立ajax', data)
  },

总结

  • 定义方法写的有点多是我自己的一点记录,其实就是一个普通的方法