关于前端http请求timeout总结

最新推荐文章于 2025-05-20 12:02:10 发布

刘汪

最新推荐文章于 2025-05-20 12:02:10 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/pingqizhendi/article/details/88288018

本文详细介绍了在不同前端框架中如何设置HTTP请求的超时时间，包括原生XMLHttpRequest、AngularJS、Angular2+及Vue.js。展示了如何利用这些框架提供的API来确保在网络延迟或服务器无响应时，能够优雅地处理超时错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xmlhttprequest

let xhr = new XMLHttpRequest();

xhr.timeout = 120000 ;  // 单位ms
xhr.ontimeout = (e)=> {
  console.log(e)//超时回调函数
};

xhr.open('GET', '/server', true);
xhr.send(null);
xhr.onreadystatechange = ()=>{
    if(xhr.status === 4 && xhr.readyState == 200){
        console.log(xhr.responseText);
   }
 };

angularJs

$http.get({ url: url, timeout: 120000 }).success(data)=>{})

angular2+

	import { Http, Headers } from '@angular/http';
	import { Observable } from 'rxjs/Observable';
	
    post(url: string, params?: any): Observable<any> {
        let headers = new Headers();
        headers.append("Content-Type", "application/json;charset=utf-8");
        return this.http.post(url, params, { headers: headers })
        				.timeout(120000 )   //单位ms
            			.map(response => response.json());
    }

vue

export default {
    post(url, params) {
        return axios.post(url, params, { timeout: 120000 });  //单位ms
    }
 }

总结
其实各大框架http服务都是对xmlhttprequest的封装，原理都是一样的。