JS，如何try/catch到XMLHttpRequest错误

cqwcns · 发表于 2022-10-21 12:18

需求比较简单，就是首先需要XMLHttpRequest请求一个数据。
如果请求成功，则继续执行。
如果请求失败，则等待用户操作上传，直到获得文件再继续。

我使用了async/await+Promise。
但现在的问题就是XMLHttpRequest错误时，无法捕获（即无法转到上传数据代码块）。
（完整测试代码见下文）
不知道应该这么写，请各位大佬指教。感谢。
微信图片_20221021121134.png

[HTML] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <!-- Vue 3 -->
  <script src="https://candyissupersweet.gitee.io/cdn/vue3/vue.global.prod.js"></script>
</head>
 
<body>
 
  <div id="app"> </div>
 
  <script type="text/javascript">
    let that = null, App = null;
 
    App = {
      mounted() {
        that = this;
        that.start();
      },
      methods: {
        async start() {
          const myData = await that.getData();
          console.log('开始使用数据');
          console.log('myData', myData);
        },
        getData() {
          return new Promise((res, rej) => {
 
            try {
              const xhr = new XMLHttpRequest();
              xhr.open('get', '/data.txt', true);
              xhr.onload = () => {
                res(handleData(xhr.response))
              };
              xhr.send();
            } catch (error) {
              // 【备用数据步骤】
              // 当出现跨域请求等错误导致无法获得数据时，用备用数据。
              // 这里一些逻辑生成data
              // 用户上传打开文件
              const data = [];
              res(handleData(data))
            }
 
            // 处理数据
            function handleData(data) {
              // 加工一下数据
              return data
            }
          })
        }
      }
    }
 
    const app = Vue.createApp(App);
    app.mount("#app");
 
  </script>
</body>
 
</html>

Takitooru · 发表于 2022-10-21 12:41

出于安全性考虑，浏览器默认禁止了file协议这种用法，会被浏览器认为是跨域访问，所以会报被跨域资源共享的安全策略等错误。

如果存在跨域等问题代码，不要直接本地打开html，丢服务器环境中测试就行了。

集成环境也有很多软件，如PHPstudy2018版，WampServer ，APMServ，这类集成环境解压即可用。

截图

cqwcns · 发表于 2022-10-21 13:04

Takitooru 发表于 2022-10-21 12:41
出于安全性考虑，浏览器默认禁止了file协议这种用法，会被浏览器认为是跨域访问，所以会报被跨域资源共享 ...

你好，你说的情况我知道。所以我才需要捕获请求错误，让用户选择文件。

实际场景是这样的，我开发了一个web小应用，当部署到云端时，会直接读取根目录数据。

但也可以本地运行，如果是本地运行，则捕获请求错误后，由用户选择本地文件来读取。

所以，我现在的问题是无法捕获请求错误，请大佬指教，感谢。

xmiter · 发表于 2022-10-21 13:15

promise 无法通过trycatch 方式捕获错误，你需要改成async await方式，然后try catch 才能捕获到错误。

zpy2 · 发表于 2022-10-21 13:24

用传统的回调函数，不用用es6的promise,promise 用reject
https://www.cnblogs.com/homeStrong/p/8231889.html

Vvvvvoid · 发表于 2022-10-21 13:25

ajax 请求是异步的, 直接这样应该不行
在这里看看能不能检测到请求失败
xhr.onreadystatechange=function (){

}

lucklys · 发表于 2022-10-21 13:44

不是这么写的

lucklys · 发表于 2022-10-21 14:09

本帖最后由 lucklys 于 2022-10-21 14:49 编辑

[JavaScript] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>TEST</title>
        <!-- Vue 3 -->
        <script src="https://candyissupersweet.gitee.io/cdn/vue3/vue.global.prod.js"></script>
    </head>
 
    <body>
        <div id="app"></div>
 
        <script type="text/javascript">
            let that = null,
                App = null
 
            App = {
                mounted() {
                    that = this
                    that.start()
                },
                methods: {
                    async start() {
                        try {
                            const myData = await that.getData()
                            console.log(myData)
                            if (myData) {
                                console.log('开始使用数据')
                                console.log('myData', myData)
                            }
                        } catch (error) {
                            console.log('捕获错误')
                            console.log(error)
                            // 【备用数据步骤】
                            // 当出现跨域请求等错误导致无法获得数据时，用备用数据。
                            // 这里一些逻辑生成data
                            // 用户上传打开文件
                            const data = []
                            this.handleData(data)
                        }
                    },
                    // 处理数据
                    handleData(data) {
                        console.log(data)
                        // 加工一下数据
                        return data
                    },
                    getData() {
                        let self = this
                        return new Promise((res, rej) => {
                            const xhr = new XMLHttpRequest()
                            xhr.open('get', '/data.txt', true)
                            xhr.onload = function () {
                                if (xhr.status < 400) res(xhr.responseText)
                            }
                            xhr.onerror = function (e) {
                                rej(e)
                            }
                            xhr.send()
                        })
                    },
                },
            }
 
            const app = Vue.createApp(App)
            app.mount('#app')
        </script>
    </body>
</html>

lz1987 · 发表于 2022-10-21 14:38

XMLHttpRequest的事件除了你用到的load(请求完成成功后后),还有error(错误时获取,例如跨域问题),timeout(超时),abort(主动取消),progress(上传进度),loadend(无论成功/失败,统一处理).在里这需求里可以使用error

lucklys · 发表于 2022-10-21 14:51

lucklys 发表于 2022-10-21 14:09
[mw_shl_code=javascript,true]

这样写应该满足你的需求了

帐号		自动登录	找回密码
密码			注册[Register]

[求助] JS，如何try/catch到XMLHttpRequest错误

免费评分

免费评分

浏览过的版块