前端Ajax请求超时处理

2019-08-19

前言

项目需求：解决ajax网络请求超时的问题。当网络请求时间超过规定时间，则弹出提示框：提示网络不稳定。

1、步骤解析：
第一步：将网络请求事件赋值给变量ajaxTimeOut
第二步：通过设置timeout属性值，来定义超时时间
第三步：通过complete中的status是否等于timeout来判断是否超时，并设置超时提示处理

2、具体代码

let ajaxTimeOut = $.ajax({    //将网络请求事件赋值给变量ajaxTimeOut 
      url: "/api",
      type: "GET",
      dataType: "json",
      data: {
        "name": "whittney"
      },
      timeout: 2000, //通过timeout属性，设置超时时间,这里指的是毫秒
      success: function (data) {
        console.log(data);
      }.bind(this),
      error: function (xhr, status, err) {
      }.bind(this),
      complete: function (XMLHttpRequest, status) { //当请求完成时调用函数
        if (status == 'timeout') {
        //status == 'timeout'意为超时,status的可能取值：
        success,notmodified,nocontent,error,timeout,abort,parsererror 
          ajaxTimeOut.abort(); //取消请求
          Modal.warning({     //超时提示：网络不稳定
            title: '友情提示',
            content: '网络不稳定',
          });
        }
      }
    });

参考链接：

https://blog.csdn.net/y532798113/article/details/95178408?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase