TypeScript中PATCH/DELETE请求触发404错误问题求助

我在TypeScript环境下开展API测试任务，创建餐厅后立即发送PATCH请求更新信息、发送DELETE请求删除餐厅时，均触发404错误，但在Postman中执行完全相同的请求却一切正常。

测试代码 #

it('Edit the existing restaurant', async () => {
    const dataToUpdate = { address: "Holon" };

    //Act
    const updateRestaurantById = await restaurantsAPI.updateRestaurantById(42, dataToUpdate);

    //Assert
    expect(updateRestaurantById.status).to.equal(200);
    expect(updateRestaurantById.success).to.be.true;
})

it('Delete existing restaurant', async () => {
    //Act
    const deleteByIdResponse = await restaurantsAPI.deleteRestaurantById(365);

    //Assert
    expect(deleteByIdResponse.success).to.be.true;
    expect(deleteByIdResponse.status).to.equal(200);
})

请求代码 #

const updateRestaurantById = async (id: number, body: Updates): Promise<ApiResponse<Updates>> => {
    return HttpRequest.networkRequest({ 
        url: baseUrl + 'restaurant', 
        method: HttpRequest.HttpMethod.PATCH, 
        queryParams: { id: id }, 
        body: body 
    });
}

const deleteRestaurantById = async (id: number): Promise<ApiResponse<null>> => {
    return HttpRequest.networkRequest({ 
        url: baseUrl + 'restaurant', 
        method: HttpRequest.HttpMethod.DELETE, 
        queryParams: { id: id } 
    });
}

排查与解决方案 #

1. 检查URL拼接格式
   确认baseUrl末尾是否带有斜杠/，如果baseUrl为http://xxx/api，拼接restaurant后会变成http://xxx/apirestaurant，直接导致路径错误。可以改为模板字符串拼接确保格式正确：

   url: `${baseUrl}/restaurant`
   

2. 确认参数传递方式
   多数REST风格的更新/删除接口要求将ID放在URL路径（如/restaurant/:id）而非查询参数中。Postman中你可能用了路径参数，但代码里用了queryParams，这会导致接口找不到对应资源。修正示例：

   // 更新接口改为路径参数
   const updateRestaurantById = async (id: number, body: Updates): Promise<ApiResponse<Updates>> => {
       return HttpRequest.networkRequest({ 
           url: `${baseUrl}/restaurant/${id}`, 
           method: HttpRequest.HttpMethod.PATCH, 
           body: body 
       });
   }
   
   // 删除接口改为路径参数
   const deleteRestaurantById = async (id: number): Promise<ApiResponse<null>> => {
       return HttpRequest.networkRequest({ 
           url: `${baseUrl}/restaurant/${id}`, 
           method: HttpRequest.HttpMethod.DELETE
       });
   }
   

3. 处理资源同步延迟
   创建餐厅后立即发送请求，可能因为数据库未完成写入导致资源不存在。可以添加短暂延迟，或先查询确认资源存在再执行操作：

   it('Edit the existing restaurant', async () => {
       // 先创建餐厅并获取ID
       const createdRes = await restaurantsAPI.createRestaurant(/* 创建参数 */);
       const resId = createdRes.data.id;
   
       // 等待资源写入完成
       await new Promise(resolve => setTimeout(resolve, 1000));
   
       const dataToUpdate = { address: "Holon" };
       const updateRes = await restaurantsAPI.updateRestaurantById(resId, dataToUpdate);
   
       expect(updateRes.status).to.equal(200);
       expect(updateRes.success).to.be.true;
   })
   

4. 排查请求封装逻辑
   打印实际发送的请求URL，和Postman中的URL对比，确认HttpRequest.networkRequest是否正确处理了queryParams：

   const updateRestaurantById = async (id: number, body: Updates): Promise<ApiResponse<Updates>> => {
       const targetUrl = `${baseUrl}restaurant?id=${id}`;
       console.log(`实际请求URL: ${targetUrl}`); // 和Postman的URL对比
       return HttpRequest.networkRequest({ 
           url: baseUrl + 'restaurant', 
           method: HttpRequest.HttpMethod.PATCH, 
           queryParams: { id: id }, 
           body: body 
       });
   }
   

内容的提问来源于stack exchange，提问作者Gurevich Sofya