Сегодня мы рассмотрим функцию index.js fetch(). Здесь мы извлекаем данные с помощью запроса POST.
Аксиос
Axios — это пакет npm, который мы будем использовать для выполнения запросов POST. Делается это так (пример из пакета axios):
// Send a POST request axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
TODO #1: Создайте файл index.js в папке /src/services/api.
TODO #2: Скопируйте приведенный ниже код в файл index.js.
/* global fetch */ import {AsyncStorage} from 'react-native'; import axios from 'axios' import {url} from './constants' const options = (endPoint, payload = {}, method, token = null) => { try { return { method: method, url: url+endPoint, withCredentials: true, headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' }, data: payload, } } catch (error) { console.log('The error response in the options: ' + error) console.log(error) } } export const fetch = (endPoint, payload = {}, method) => { return new Promise(function(resolve, reject){ AsyncStorage.getItem('Auth').then((token) => { axios(options(endPoint, payload, method, token)) .then( function(response) { // console.log("Server OK: Data, ", response.data); // console.log(response.status); // console.log(response.statusText); // console.log(response.headers); // console.log(response.config); return resolve(response) }).catch(function (error){ if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); return reject(error) }) }) }) }
- AsyncStorage. По сути, как и файлы cookie для React Native, он позволяет нам сохранять наши токены для последующего использования.
- url+endPoint: URL извлекается из api_url() в нашем файле constants.js и с помощью endPoint сформируйте что-то вроде https://production.dancingnomads.com/signup
- токен: токен устанавливается, когда пользователь входит в систему, это токен, используемый для аутентификации пользователя и проверки того, что пользователь проверен для доступа к запрошенным данным.
fetch() использует "Promise" и "axios" для асинхронного вернуть ответ/ошибку, полученный из API. Это обрабатывается функцией, КОТОРАЯ ВЫЗЫВАЕТ fetch().
Если вы присмотритесь, то заметите, что const options ДЕЙСТВИТЕЛЬНО просто возвращает параметры, отформатированные в аксиомнойформе.
Используйте console.log соответственно, чтобы узнать, какие ответы/ошибки вы получаете от своего API.
Это все на сегодня!
Надеюсь, вы весело провели время и узнали что-то новое сегодня! Не забудьте похлопать этому посту! :)
Не любите читать? Попробуйте посмотреть видео
Справочные ссылки
аксиос: https://www.npmjs.com/package/axios
реакция-аксиос: https://www.npmjs.com/package/react-axios
обещание: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Свяжись со мной!
Linkedin: https://www.linkedin.com/in/donaldlee50
Instagram: https://www.instagram.com/donaldlee50/
Twitter: https://twitter. com/donaldlee50
Youtube: https://youtube.com/coursehack
Список рассылки: http://bit.ly/coursehack-mailing-list
Группа Coursehack в Facebook : bit.ly/join-coursehack-facebook-group
** Не забудьте поаплодировать и поделиться с другими разработчиками React Native & Expo!