使用 Rxjs Ajax 获取 HTML 数据

Question

我有一个包含表单的 HTML，现在我想加载该表单并使用 RxjS（我已经使用它来使用 API 中的数据）在 DIV 中替换它

为此寻找并修改以下代码：

    const users = ajax({
        url: '/form.action',
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: "inline=1",
    }).pipe(
        map(response => console.log('response: ', response)),
        catchError(error => {
            console.log('error: ', error);
            return of(error);
        })
    );

但是它返回对 null 的响应并且 responseType 说 JSON，我做错了什么？

Answer 1

我更改添加响应的代码及其现在的工作，代码如下：

    ajax({
        method: 'GET',
        url: link + '?inline=1',
        responseType: 'text'
    }).pipe(
        map((response) => {
            return response.response;
        }),
        catchError(error => {
            return of(error);
        })
    ).subscribe({
        next: value => {
            jQuery('main').html(value);
        },
        error: err => {
            console.log(err)
        },
        complete: () => {
            console.log("loaded")
        }
    });

Answer 2

第一次尝试使用

map

的想法确实是最好的开始方式，这样

users

就可以保持“纯”可观察流而没有副作用。

然后，正如您还指出的那样，您需要订阅它。在代码中将可观察对象和订阅保持一定程度的分离是一种很好的做法。

如果您正在创建一些 jQuery 模板，您可能只想使用 Rimmel.js，它通过无缝订阅您的 observable 并将它们发出的任何内容直接下沉到 DOM 中来帮助您保持更精简的代码，因此您不必至：

  const users = ajax.getJSON(`${link}?inline=1`).pipe(
      map(response => response.response),
      catchError(error => of(error)),
    );
  
  jQuery('#main').html(render`
    <h1>Results</h1>
    <div>
      ${users}
    </div>
  `);

灵感来自https://codepen.io/fourtyeighthours/pen/rNqzgdq