本篇主要讲解$http(config)的config中的timeout项:

$http({

   timeout: number

})

数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误

demo:

html:

<!DOCTYPE html>

<html ng-app = 'HttpGet'>

<head>

  <title>18.4 $http(2)</title>

  <meta charset="utf-8">

  <script src="angular.js"></script>

  <script src="script.js"></script>

</head>

<body>

<div ng-controller = "dataController">

  <span>{{data}}</span>

</div>

</body>

</html>

js:

var jsonData = {name:"code_bunny"};

var httpGet = angular.module('HttpGet',[]);

httpGet.factory('getData',function($http,$q){

    return function(){

        var defer = $q.defer();

        $http({

            method:'post',

            url:'/api/user',

            data: jsonData,

            headers: {'Authorization':'code_bunny'},

            timeout: 1000

        }).success(function(data,status,headers,config){

            defer.resolve(data);

        }).error(function(data,status,headers,config){

            defer.reject(data)

        });

        return defer.promise

    }

});

httpGet.controller('dataController',function($scope,getData){

    $scope.data = getData()

});

nodejs:

var express = require('express');

var bodyParser = require('body-parser');

var app = express();

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json

app.use(bodyParser.json());

app.use(express.static(__dirname+''));

var data = "name=code_bunny&age=3";

app.post('/api/user',function(req,res){

    console.log(req.body);

    setTimeout(function(){

        res.send(data)

    },2000)

});

app.listen(3000);

如代码所示,我们在后台设置2000毫秒以后返回内容,但是在$http的congif里设置等待超时为1000毫秒,所以,还不等到后台返回数据,请求就会被取消:

*注意: timeout只能在某个单独的$http()里面配置,不能通过$httpProvider.defaults.timeout进行配置

完整代码路径:https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/18.4%20%24http(2)

angular学习笔记(二十六)-$http(4)-设置请求超时的更多相关文章

  1. angular学习笔记(二十五)-$http(3)-转换请求和响应格式

    本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...

  2. angular学习笔记(二十四)-$http(2)-设置http请求头

    1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain       ...

  3. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  4. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  5. angular学习笔记(二十八-附1)-$resource中的资源的方法

    通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...

  6. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

    ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...

  7. angular学习笔记(二十二)-$http.post

    基本语法: $http.post('url',{},{}).success(function(data,status,headers,config){ }).error(function(data,s ...

  8. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. es6(const、let)

    首先我很好奇,明明现代浏览器支持ES6.ES7不是那么好,为何还推行? var let const 有何区别?它们之间的限制又是什么?且听我娓娓道来 1. var 和let的关系,为何推荐let? ( ...

  2. php之快速入门学习-13(PHP 循环 - While 循环)

    PHP 循环 - While 循环 循环执行代码块指定的次数,或者当指定的条件为真时循环执行代码块. PHP 循环 在您编写代码时,您经常需要让相同的代码块一次又一次地重复运行.我们可以在代码中使用循 ...

  3. cp 命令（转）

    原文:http://www.cnblogs.com/peida/archive/2012/10/29/2744185.html cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情 ...

  4. 如何设置mysql登陆密码？

    此情况用于mysql密码为空. 命令如下: Mysqladmin –uroot password root1234 Root是用户名,root1234是新设置的密码

  5. java基础50道编程题

    50道JAVA基础编程练习题 [程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析 ...

  6. HTML字符实体举例说明

    html代码的意思 <>& ©∧∨"&qpos; 下面网址有详细说明: http://en.wikipedia.org/wiki/List_of_XML_and_ ...

  7. windows 批处理设置环境变量

      windows通过批处理设置环境变量 CreateTime--2017年8月4日11:28:11Author:Marydon 参考链接:https://wenku.baidu.com/view/a ...

  8. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  9. Android基于TCP的局域网聊天通信

    概述 在同一局域网内,两台设备通过TCP进行通信聊天. 详细 代码下载:http://www.demodashi.com/demo/10567.html 一.准备工作 开发环境 jdk1.8 Ecli ...

  10. 通过JS控制各种元素的点击事件的【时间间隔】，特别适合【发表评论】功能

    1.使用情景模拟:下单(防止用户无脑狂点).支付(防止用户无脑点击支付).发表评论(防止用户无脑点击),当然如果你用了一个提示框进行屏蔽,下面代码可以无视了,右上角谢谢. 2.默写情景比如:比如发表评 ...