Почему после отправки формы возвращается undefined? И что исправить?

Question

[diwlumoprif]

Есть файл Form.js где есть вот такая часть кода:

/.....
onSubmit: async (formValues) => {
          console.log('submit', formValues);
          try {
              const response = await api('posts', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              console.log('Result!', response);
          } catch(e) {
              console.error(e);
          } 
      },    
/.....

и файл api.js в котором у меня метод fetch:

export const api = (url, args) => fetch(`${apiUrl}${url}`, {
   ...args,
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      ...args.headers,  
    },
  }).then((data)=> data.json());

И все работает хорошо. Результат такой в консоли:


Но я решил переделать в файл api.js синтаксис then на async-await:

export const api = async (url, args) => { 
  const response = await fetch(`${apiUrl}${url}`, {
   ...args,
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      ...args.headers,  
    },
  });
  const data = await response.json();   
}

и теперь у меня выводит в консоли undefined. Вот так:


Почему возвращает undefined? Что иправить мне в коде?

Answer 1

[Stockholm Syndrome]

return await response.json();

Comments

[diwlumoprif]

в коде пожалуйста api.js напишите ваш ответ

[Stockholm Syndrome]

diwlumoprif, а сами не додумали?

export const api = async (url, args) => { 
  const response = await fetch(`${apiUrl}${url}`, {
   ...args,
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      ...args.headers,  
    },
  });
  return await response.json();   
}

[Дмитрий Беляев]

return await

не надо так...

[diwlumoprif]

Дмитрий Беляев, почему? и как тогда нужно?

[diwlumoprif]

Stockholm Syndrome, тогда ошибка:

[Stockholm Syndrome]

diwlumoprif, ошибка с запросом связана

[Дмитрий Беляев]

diwlumoprif, достаточно просто return response.json();
нет смысла разварачивать промис через await только для того чтоб async function обратно завернула результат в промис

[diwlumoprif]

Дмитрий Беляев, можете помочь коректно переделать:

export const api = async (url, args) => { 
  const response = await fetch(`${apiUrl}${url}`, {
   ...args,
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      ...args.headers,  
    },
  });
  const data = await response.json();   
}

или лучше оставить все как есть?

[Дмитрий Беляев]

diwlumoprif,

export const api = async (url, args) => { 
  const response = await fetch(`${apiUrl}${url}`, {
   ...args,
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      ...args.headers,  
    },
  });
  return response.json();   
}

[diwlumoprif]

Дмитрий Беляев, спасибо