Сегодня мы рассмотрим функцию 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!