如何在 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 image

function* 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 image

function* 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 results

function* invokeSagasInOrder(sagas) {

    try {

        const image = yield* createImage();

        yield* createProduct(image);

    } catch(e) {

        console.log(e);

    }

}