使用promise相较于ajax的优势(Angularjs $q 为例)

最新推荐文章于 2024-07-27 14:43:55 发布

嗡汤圆

最新推荐文章于 2024-07-27 14:43:55 发布

阅读量4.8k

点赞数 1

分类专栏： Web前端开发文章标签： ajax jquery angularjs web开发异步

本文链接：https://blog.csdn.net/tzdwsy/article/details/50038631

版权

本文探讨了在Web开发中使用异步操作的必要性，特别是使用Promise（以AngularJS的$q为例）相比jQuery的ajax带来的优势。内容涵盖了$http服务的基本使用，包括解决post请求的问题，以及在直接异步操作中遇到的挑战，如任务顺序控制。通过$q，可以方便地组织和控制多个异步任务，作为缓存方法减少不必要的服务器请求。

摘要由CSDN通过智能技术生成

一般在WEB开发时总会涉及到从服务器调用接口的操作，为了不影响用户操作，一般会使用异步方式执行，从而不阻塞用户的界面操作。而一些常用的调用服务会封装成独立模块供使用。这时候就会遇到一些问题。比如：若所有服务内的方法都是异步方式的，则如何在外部控制两个异步任务的顺序？如何较为统一地处理超时以及执行异常的状况？…等等
直到后来看到了$q…

异步操作

异步操作有一般使用 jQuery的ajax，本文结合AngularJs，因此也顺带引入Angular的$http服务。

ajax

ajax的常用写法如下:

$.ajax({
    type:'post',//or 'get'
    url:'api/foo',
    data:{
  'a':'v'},
    async:true, //or false
    success:function(response){
   
        parseResponse(response);
    },
    error:function(err){
   
        handleError(err);
    }
})

在上述场景中async 决定了ajax是否阻塞界面进程。若asycn=false，则在请求过程中用户界面无响应，反之无影响。
需要强调的是：若在async=true情况下更新Angular的$scope中的数据，应该调用$scope.$apply()来手动完成刷新

$http

基本使用

angular中的$http默认均为异步执行，同时与$scope的刷新不冲突。常用方式如下:

/**
 * @param method:post,get.....
 * @param url:api REST路径
 * @param data:封装在request请求中的参数
 * @param param:写在url路径后面的参数'?param=v&param2=v2...'
 * @param timeout:超时时间 
 */
$http({method:'POST', url:url, data:data, param:param,
timeout:5000})
.success(function(response){
   
    parseResponse(response);
})
.error(function(err,stat){
   
    handleErr(err);
});