如何创建依赖Promise的Observable？RxJS Ajax请求如何添加异步Token？

嘿，我来帮你搞定这两个RxJS的问题！

RxJS里有个非常方便的操作符from，它可以直接把Promise转换成Observable，完美满足你“依赖Promise创建Observable”的需求。

举个例子，假设你有一个从异步存储获取数据的Promise函数：

// 模拟异步存储的Promise操作
const fetchDataFromStorage = async () => {
  const data = await someAsyncStorageAPI.getItem('key');
  return data;
};

// 用from把Promise转为Observable
const data$ = from(fetchDataFromStorage());

这个data$就是依赖Promise的Observable了——当Promise成功resolve时，Observable会发出对应的值，随后自动完成；如果Promise reject，Observable会抛出错误。

如果你想手动创建Observable（而不是用from），也可以通过new Observable构造函数实现，不过from显然更简洁：

const data$ = new Observable(subscriber => {
  fetchDataFromStorage()
    .then(data => {
      subscriber.next(data);
      subscriber.complete();
    })
    .catch(error => subscriber.error(error));
});

你的原始search函数直接返回了ajax请求，但现在需要先从异步存储拿到Token再发起请求。这里可以用switchMap操作符，先处理获取Token的Observable，再切换到ajax请求的Observable。

修改后的代码如下：

import { ajax } from 'rxjs/ajax';
import { from, switchMap } from 'rxjs';
// 假设你用的是React Native的AsyncStorage，根据你的实际存储库调整
import AsyncStorage from '@react-native-async-storage/async-storage';

export const search = term => {
  // 先从异步存储获取Token
  return from(AsyncStorage.getItem('authToken')).pipe(
    switchMap(token => {
      // 配置ajax请求，带上Token头（如果Token存在的话）
      return ajax({
        url: `/search?term=${term}`,
        headers: {
          // 只有当Token存在时才添加Authorization头
          ...(token && { Authorization: `Bearer ${token}` })
        }
      });
    })
  );
};

这样修改后，你的原有使用代码完全不用变：

fromEvent(element, 'keyup').pipe(
  switchMap(event => search(event.target.value)) // 注意这里可能需要从event里取输入值，你的示例里简化了term的来源
);

如果想处理Token获取失败或者请求失败的情况，可以加上catchError操作符做降级处理：

import { ajax } from 'rxjs/ajax';
import { from, switchMap, catchError } from 'rxjs';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const search = term => {
  return from(AsyncStorage.getItem('authToken')).pipe(
    switchMap(token => 
      ajax({
        url: `/search?term=${term}`,
        headers: token ? { Authorization: `Bearer ${token}` } : {}
      })
    ),
    catchError(error => {
      console.error('搜索请求出错:', error);
      // 比如没有Token时发起不带认证的请求，或者返回错误Observable
      return ajax(`/search?term=${term}`);
    })
  );
};

内容的提问来源于stack exchange，提问作者Explosion Pills