如何在 saga 中处理多个依赖请求？

Question

我正在尝试提出两个请求，一个是保存图像，另一个是使用从第一个请求中获得的 url 来保存产品

这是我首先要做的：保存产品图片（我使用 axios 进行请求）其次：从“productImage”获取 url，然后将其包含在参数中以保存

这是我的代码

function* createProduct(action) {

  const { endpoint, params } = action.payload;

  try {   

    const productImage = yield call(new api().createImage, { endpoint, params });

     // I need to wait the url of the image and include it on the params for the second request before is executed

    // E.g. params.image = productImage.url

    const product = yield call(new api().createProduct, { endpoint, params });

    yield put({

      type: CREATE_PRODUCT_SUCCEED,

      payload: {

        product 

      }

    });

  } catch (e) {

    yield put({

      type: CREATE_PRODUCT_FAILED,

      payload: {

        ...e

      }

    });

  }

}

export default function* createProductWatcher() {

  yield takeEvery(CREATE_PRODUCT_EXECUTION, createProduct);

}

Answer 1

这里最好的模式是将你的传奇 ( createProduct) 分成两个独立的传奇：createImage - 将处理产品的图像创建createProduct - 将使用给定的图像处理产品创建// Creates the product imagefunction* createImage(action) {    const { endpoint, params } = action.payload;    try {        const image = yield call(new api().createImage, { endpoint, params });        yield put({            type: CREATE_IMAGE_SUCCEED,            // Here you pass the modified payload to createProduct saga            payload: {                endpoint,                params: { image: image.url }            }        });    } catch(e) {        yield put({            type: CREATE_IMAGE_FAILED,            payload: {                ...e            }        });    }}//Creates the product with the imagefunction* createProduct(action) {    const { endpoint, params } = action.payload;    try {        const product = yield call(new api().createImage, { endpoint, params });        yield put({            type: CREATE_PRODUCT_SUCCEED,            payload: {                product            }        });    } catch(e) {        yield put({            type: CREATE_PRODUCT_FAILED,            payload: {                ...e            }        });    }}然后使用内置yield*运算符按顺序组合多个 Sagas 。// Another saga for chaining the resultsfunction* invokeSagasInOrder(sagas) {    try {        const image = yield* createImage();        yield* createProduct(image);    } catch(e) {        console.log(e);    }}