Как обработать асинхроный вызов внутри Promise?

Question

[vsuhachev]

При использовании fetch для отработки http-статусов, отличных от 200 я создаю Promise. Я написал такой код и он вроде делает то что нужно, но очевидно, что вызов resp.json().then() отрабатывает параллельно с возвратом ошибки и могут возникнуть потенциальные проблемы. Как в данном случае написать корректный код который не вызовет проблем?

fetch(url, opts)
            .then((resp)=> new Promise((resolve, reject) => {
                if (resp.ok) {
                    resolve(resp)
                } else {
                    const error = new Error(resp.statusText);
                    error.status = resp.status;
                    resp.json().then(json => {error.data = json}); // Problem here
                    reject(error)
                }
            }))
            .then(...)
            .catch(...)

Answer 1

[Александр Вульф]

fetch(url, opts)
  .then((resp) => {
    if (!resp.ok) {
      resp = resp.json().then(json => {
        var error = new Error(resp.statusText);
        error.status = resp.status;
        error.data = json;

        throw error;
      })
    }

    return resp;
  })
  .then(resp => {
    // use resolve
  })
  .catch(err => {
    // cathc here
  })

Comments

[vsuhachev]

Небольшими доработками я запустил ваш код, а потом понял что продублировал решение от Алексей Уколов :)

fetch(url, opts)
  .then((resp) => {
    if (!resp.ok) {

      var error = new Error(resp.statusText);
      error.status = resp.status;
      
      resp = resp.json().then(json => {
        error.data = json;
        throw error;
      }).catch(() => {
        throw error;
      })
    }
    return resp;
  })
  .then(resp => {
    return resp.json()
  })
  .then(json => {
    console.log('use resolve', json)
  })
  .catch(err => {
    console.log(`cathc here => ${err.name} :: ${err.message} :: ${err.status}`)
    console.log('cathc here', err)
  })

[Александр Вульф]

vsuhachev: так в том-то и фокус, что верхний catch не нужен. Когда мы там поймаем исключение, оно будет пробрасываться дальше до тех пор, пока не вырвется из Promise. Если же его перехватит какой-то catch, то оно там и останется :)

[vsuhachev]

Александр Вульф: Это так, но мне такое поведение не нужно. Если в ответе будет 404 и некорректный JSON я поймаю JSON parse error вместо 404

Answer 2

[Алексей Уколов]

Создавать Promise здесь и не нужно, поскольку catch ловит и синхронные ошибки, а then могут принимать не только Promise, но вообще любое значение.
Я на coffee переписал и в своём стиле, но общий смысл должен быть понятен

fetch(url, opts)
.then(
	(resp) ->
		unless resp.ok
			error = new Error(resp.statusText)
			error.status = resp.status
			error.data = null

			throwError = -> throw error

			resp.json()
			.then(
				(json) ->
					error.data = json
			)
			.then(throwError)
			.catch(throwError)

		return resp
)
.then(...)
.catch(...)

Comments

[vsuhachev]

Алексей Уколов, а что будет, если json не распарсится? Я так понимаю нужно еще и .catch() на resp.json() навешивать?

[Алексей Уколов]

vsuhachev: да, вы правы, json(), судя по спеке кидает все исключения, так что их тоже нужно обрабатывать.

[vsuhachev]

Алексей Уколов: Проверил ваше решение, в нем не хватает одной существенной детали, без которой оно не до конца работает: нужно как в коде у Александр Вульф возвращать результат resp.json() из ветки unless resp.ok

[Алексей Уколов]

vsuhachev: куда возвращать? Наши решения идентичны в плане возвращаемых значений.

[Алексей Уколов]

Если вы об этом "resp = resp.json()", то это, во-первых, бессмысленный код, а во-вторых, до этого присвоения дело не дойдет, поскольку будет выброшена ошибка.

[vsuhachev]

Алексей Уколов: Нет. Там похоже получается так что если !resp.ok(например 404) и вернуть неизмененный resp то пойдет исполнятся вся остальная цепочка которую мы обозначили .then(...)

Answer 3

[vsuhachev]

В итоге пришел к такому коду:

fetch(url, opts)
  .then((resp) => {
    if (resp.ok) return resp;

    return resp.json()
      .then(json => json)
      .catch(() => null)
      .then(errData => {
        const error = new Error(resp.statusText);
        error.status = resp.status;
        if (errData) error.data = errData
        throw error;
      })
  })
  .then(...)
  .catch(...)