vue 项目使用 jquery 判断 URL 是否有效

前言

当我们访问无效的 URL 时页面会报错（如下），这让用户的使用体验变得很差，如果在点击前对 URL 进行判断是否有效，再根据判断结果进行下一步操作，如果该 URL 真实有效则进行 xxxx x 操作 , 无效则提示用户该 URL 无法访问不进行跳转。（ vue 项目引入 jquery 可以看我的另一篇文章）

判断 URL 是否有效

方法一：仅适用于 IE （不推荐）

function getUrlState(URL) {
  var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
  xmlhttp.Open("GET", URL, false);
  try {
    xmlhttp.Send();
  } catch (e) {
  } finally {
    var result = xmlhttp.responseText;
    if (result) {
      if (xmlhttp.Status == 200) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
}

方法二：支持 跨域

利用 jquery 的 ajax 请求返回请求结果进行判断, 如果这个 url 不存在，ajax 请求会返回 404 . 然后判断返回的状态码，能响应200，说明 url 真实有效，状态码为其它则表示 URL 出现问题，需要发出提示

实现原理：

1、使用 jsonp，解决跨域问题

2、使用 timeout，在服务端出错时（http 状态码为：5XX、4XX），jquery 无法捕获到这个错误

只要加上timeout 参数即可，超时设置越短越好

代码

$.ajax({
        type:'get',
        url:this.resume.resumeUrl,
        dataType: 'jsonp',
        timeout: 1000,
        complete: function (res) {
          if (res.status == 200) {
              window.open(resumeUrl)    // 这里是打开该 URL ，可以根据自己的需求更改逻辑代码
          } else {
            this.$message.error('文件无效或已删除');
          }
      }
  })