美文网首页Vue2.x笔记WEB前端HTML/JS/CSS
JS async/await-ajax异步请求等待返回数据

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

作者: YLPeach | 来源:发表于2017-09-14 08:35 被阅读429次

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)
  },

总结

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

相关文章

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

    JS async/await-ajax异步请求等待返回数据 例子使用的是 axios 做ajax请求 在vue中使...

  • vue中用async/await 来处理异步

    用async/ await来发送异步请求,从服务端获取数据,等待获取数据,然后处理数据。 resolve,reje...

  • 08_Ajax&Json

    异步请求 无刷新获取服务器资源。特点: js发送异步请求,服务器响应返回的数据给到js,js操作dom更新页面 无...

  • es6--async和await

    async 和 await被称为js异步的最终解决方案,那么我们来了解下:async:异步方法, await:等待...

  • springboot异步请求

    1.异步请求, 在异步类或方法上加@Async 注意:@Async注解的方法的返回类只能是void和Futur...

  • 页面跳转并返回数据

    异步请求和等待 Dart中的异步请求和等待和ES6中的方法很像,直接使用async...await就可以实现。比如...

  • 12. 页面跳转并返回数据

    异步请求和等待 Dart中的异步请求和等待和ES6中的方法很像,直接使用async...await就可以实现。比如...

  • Flutter-14-页面跳转并返回数据

    异步请求和等待: 使用async...await就可以实现_navigateToXiaoJieJie(BuildC...

  • Flutter之数据请求

    目录 异步操作Future Async/await Dio引用,Get请求和POST请求的使用 数据请求和动态组件...

  • js循环中含有异步请求同步写法

    如下 js 函数需要返回一个请求成功的数据数组,但是由于 ajax 为异步请求,循环中发送多个请求,函数 retu...

网友评论

    本文标题:JS async/await-ajax异步请求等待返回数据

    本文链接:https://www.haomeiwen.com/subject/zvyrsxtx.html