Как использовать асинхронное ожидание в React с использованием аксиос в вызове API - PullRequest
Новая
       8

Как использовать асинхронное ожидание в React с использованием аксиос в вызове API

0 голосов
/ 10 января 2019

Я новичок в веб-разработке. Я использую react.js. Так, здесь я хочу использовать async/await для вызова API. Я использую axios.

Теперь

то, что у меня есть, похоже 

export function fetchToken(bodyjson) {
  return (dispatch) => {
    let url = LOGIN_PATH + "username=" + bodyjson.userName + "&password" + "=" + bodyjson.password;
    return post(url, bodyjson)
      .then((response) => {
        if (response.status === 200) {
          localStorage.setItem('user', bodyjson.userName);
          localStorage.setItem('access_token', response.payload.access_token);
          history.push('/');
          dispatch({
            type: LOGIN_SUCCESS,
            data: response.payload,
          })
        }
        else {
          dispatch({
            type: LOGIN_FAILED,
            data: response.status,
          });
        }
      })
  }
}

и мой почтовый сервис похож на 

export const post = (url, post_data) =>
    axios.post(
        apiGatewayEndpoint.apiGatewayEndpoint + url,
        post_data,
        {
            headers: {
                "Authorization": localStorage.getItem("access_token") !== null ? `Bearer ` + localStorage.getItem("access_token") : null,
                "Content-Type": "application/json"
            }
        }
    ).then(data => {
        if (data.status === HttpStatus.OK) {
            return {
                status: data.status,
                payload: data.data
            };
        }
    }).catch(err => {
        return {
            status: err.response.data,
            payload: null
        };
    });

Теперь я хочу использовать асинхронное ожидание здесь. Я очень смущен между этим. Я прошел много уроков. Я хочу вызвать API сразу после login. на этом основании я хочу перенаправить пользователя на страницы различий.

Итак, кто-нибудь может мне помочь с этим async-await

СПАСИБО: -)

Теперь я использую это как 

export function fetchToken(bodyjson) {
  return async (dispatch) => {
    let url = LOGIN_PATH + "username=" + bodyjson.userName + "&password" + "=" + bodyjson.password;
    let response = await post(url, bodyjson)
    if (response.status === 200) {
      localStorage.setItem('user', bodyjson.userName);
      localStorage.setItem('access_token', response.payload.access_token);
      let fetchJd = FETCH_JD_ROOT_URL + page + "&" + size;
      let newApiResponse = await get(fetchJd)
      if (newApiResponse.status === 200) {
        dispatch({
          type: LOGIN_SUCCESS,
          data: response.payload,
        })
        dispatch(sendUserJd(newApiResponse.payload));
      }else {
    dispatch({
      type: LOGIN_FAILED,
      data: response.status,
    });
  }

    }
    else {
      dispatch({
        type: LOGIN_FAILED,
        data: response.status,
      });
    }
  }

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Для этой цели не требуется асинхронное ожидание.

С , затем цепь , подход 

export function fetchToken(bodyjson) {
    return (dispatch) => {
        let url = LOGIN_PATH + "username=" + bodyjson.userName + "&password" + "=" + bodyjson.password;
        return post(url, bodyjson)
        .then((response) => {
            if (response.status === 200) {
                localStorage.setItem('user', bodyjson.userName);
                localStorage.setItem('access_token', response.payload.access_token);
                history.push('/');
                dispatch({
                    type: LOGIN_SUCCESS,
                    data: response.payload,
                })
                //next api call
                return post(newUrl, newBodyjson)
            }
            else {
                dispatch({
                    type: LOGIN_FAILED,
                    data: response.status,
                });
            }
        })
        .then((newApiResponse) => {
            //Do stuffs with new api response
        })
    }
}

Но если вы хотите использовать async-await подход только 

export function fetchToken(bodyjson) {
    return async (dispatch) => {
        let url = LOGIN_PATH + "username=" + bodyjson.userName + "&password" + "=" + bodyjson.password;
        let response = await post(url, bodyjson)
        if (response.status === 200) {
                localStorage.setItem('user', bodyjson.userName);
                localStorage.setItem('access_token', response.payload.access_token);
                history.push('/');
                dispatch({
                    type: LOGIN_SUCCESS,
                    data: response.payload,
                })
                let newApiResponse = await post(newUrl, newBodyjson)
                //Do stuffs with new api response
            }
            else {
                dispatch({
                    type: LOGIN_FAILED,
                    data: response.status,
                });
            }
    }
}
0 голосов
/ 10 января 2019

для получения запросов, вы можете использовать параметры для отправки данных и т. Д. И т. Д. 

   export const getData = async () => {
    try {
        const { data } = await axios({
            method: 'get', //you can set what request you want to be
            url: `yoururl`,
            params: {
            // key values pairs   
            }
            headers: {
                'token': token
            }
        });
        // run some validation before returning
        return data;
    } catch (e) {
        console.log(e);
        return .. some error object;
    }
};

для почтового запроса 

export const getData = async (params) => {
    try {
        const { data } = await axios({
            method: 'post', //you can set what request you want to be
            url: `url`,
            data: params,
            headers: {
                'x-auth-Token': token
            }
        });
        // run some validation before returning
        return data;
    } catch (e) {
        console.log(e);
        return .. some error object;
    }
};

пример объекта ошибки 

{
  status: 'error',
  message: 'failed with something'
}

тогда вы можете вызвать любой API, как это, 

async componentDidMount() {
 const data = await getData();
 if(data.status === 'Something') {
// do something    
  }
}
...