предисловие
В React результат, возвращаемый функцией рендеринга, зависит от свойств и состояния компонента.
Все мы знаем, что данные на странице пользовательского интерфейса не являются жестко запрограммированными, они часто берутся из внутреннего интерфейса данных.
Затем заполните страницу реальными данными Итак, в какой функции жизненного цикла должен быть сделан запрос? Как инициировать Ajax-запрос и какие есть способы? И как мы моделируем внутренний интерфейс данных?
Тогда этот раздел - то, что вы хотите знать
Пример API возвращает следующий объект json
Если список продуктов, возвращаемый серверной частью, выглядит следующим образом
{
"goodLists": [
{"id": 1, "name": "瓜子", "price": 10, "address": "广东"},
{"id": 2, name": "苹果", "price": 20, "address": "北京"}，
{"id": 3, "name": "橘子", "price": 8, "address": "湖南"}，
{"id": 4, "name": "桃子", "price": 13, "address": "北京"},
{"id": 5, "name": "榴莲", "price": 18, "address": "海南"}
]
}
Назовите json-код этого списка продуктов как goodlist.json и поместите его в папку API общедоступного корневого каталога.
Вы можете поместить свои собственные смоделированные данные в папку API в общем каталоге.Файл смоделированных данных можно поместить только в общий каталог, в противном случае будет сообщено об ошибке, и он не вступит в силу.
Отображение соответствующего эффекта пользовательского интерфейса: как показано ниже.
В какой функции жизненного цикла отправлять запрос AJax
Также можно поместить запрос Ajax в функцию, где компонент componentWillMount собирается монтироваться.
Однако официально рекомендуется инициировать Ajax-запросы в функции жизненного цикла componentDidMount, поскольку DOM уже смонтирован при выполнении этого жизненного цикла.
Таким образом, вы можете получить данные, возвращаемые Ajax-запросом, и обновить компонент через setState.
componentDidMount(){
// 在这里进行Ajax数据请求，axios,fetch,jquery Ajax或者request都可以
}
Как отправить запрос AJax?
В реакции вы можете использовать вашу любимую библиотеку Ajax, такие как: Axios, встроенный метод лесного браузера, jQuery Ajax или сторонний библиотечный запрос, давайте посмотрим на них один за другим
- Способ 1. Отправить запрос Ajax с помощью AxiosЭтот метод обычно используется во Vue, React или даже некоторых других фреймворках, он поддерживает метод promise, и перед использованием библиотеки axios его следует установить глобально с помощью npm или cnpm в терминале.
npm install -S axios
或者cnpm install -S axios
或者yarn add axios
После установки axios в верхней части файла, который должен использовать запрошенные данные, импортируйте библиотеку axios, как показано в следующем коде, ниже приведен конкретный код приведенного выше примера API.
import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'; // 引入axios库
import "./style.css";
class List extends Component {
constructor(props){
super(props);
this.baseUrl = '/api/goodlist'; // 这里是本地模拟,在public下创建一个api文件,放置一个json文件，这里的路径直接是根路径即可,react会自动的找到这个目录
// this.baseUrl = 'http://localhost:4000/api/goodlist'; // 这种方式是使用代理的方式,这里用的是mockoon工具
// this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists'; //这是使用easy-mock
this.state = {
list: []
}
}
render(){
const { list } = this.state;
return (
<Fragment>
<ul>
{
list.map((item) => {
const isRed = item.price >= 10 ? 'red':'';
return (
<li key = {item.id}>{item.name}-<span className={ isRed }>{item.price}￥</span>-{item.address}</li>
)
})
}
</ul>
</Fragment>
);
}
// Ajax请求放在componentDidMount生命周期内
componentDidMount(){
// 使用axios完成ajax数据请求
axios.get(this.baseUrl)
.then(res => {
const { goodlists } = res.data;
this.setState({
list: goodlists
})
})
.catch(err => {
console.log(err);
})
}
}
const container = document.getElementById('root');
ReactDOM.render(<List />, container);
Приведенный выше код предназначен для инициирования запроса Ajax в componentDidMount и использования axios для запроса данных.
После получения данных используйте setState, чтобы обновить данные состояния компонента и отобразить их на странице.
В то же время, когда цена больше 10, делаются некоторые логические суждения, чтобы цена больше 10 стала красной.В JSX может выполняться некоторая специальная обработка с помощью интерполирующих выражений.
Уведомление: JSON-файл данных локального моделирования (здесь goodlist.json), расположение может быть размещено только в папке общего каталога корневого каталога, если он размещен в другом месте, он не будет работать.
Причина, по которой он работает публично, заключается в том, что путь доступа является непосредственно корневым путем.Webpack выполнил некоторую обработку, и реакция автоматически найдет этот каталог.
- Способ 2. Используйте встроенный в браузер метод выборки.
Этот метод представляет собой стандартный интерфейс браузера, предоставляющий простой и разумный способ получения данных о ресурсах асинхронно по сети.Сейчас он становится все более популярным.Также Ajax-запросы также размещаются после монтирования компонента componentDidMount для данных. , спросите
componentDidMount(){
// 使用fetch,这里的地止换成上面的this.baseUrl也是可以的
fetch('/api/goodlist')
.then(res => res.json())
.then((result) => {
console.log(result);
const { goodlists } = result;
this.setState({
list: goodlists
})
},
// 注意在这里处理错误时,与axios有些区别,不是用catch()去捕获错误,因为使用catch去捕获异常会掩盖掉组件本身可能产生的bug
(error) => {
console.log(error);
}
)
}
Вышеупомянутый использует метод fetch для запроса данных. Fetch — передовой стандарт. Это альтернатива Ajax. Его API разработан на основе Promise. Старые версии браузеров не поддерживают выборку. Требуется Polyfill es6-promise.
Для получения более подробной информации об использовании fetch обратитесь к документации MDN.
- Способ 3: использование JQ Ajax
jQuery — это библиотека. Если вы хотите использовать ее в React, вы должны сначала установить ее. Использование этого метода для запроса данных возможно, но не рекомендуется.
npm install -S jquery
或者
cnpm install -S jquery
Затем в файле, где нужно запрашивать данные, ввести jquery
import $ from 'jquery'
Затем в функции жизненного цикла componentDidMount используйте метод jquer для запроса данных, следующее:
Использование .post, $.ajax() можно проверить самостоятельно
componentDidMount(){
/*
$.get('/api/goodlist', function(res){
console.log(res);
this.setState({
list: res.goodLists
})
}.bind(this)) // 这里必须手动绑定this
*/
// 等价于下面的,如果不手动绑定,可以使用箭头函数,避免this的绑定
$.get('/api/goodlist', (res) => {
console.log(res);
const { goodlists } = res;
this.setState({
list: goodlists
})
})
}
Вышеизложенное заключается в использовании метода Ajax, предоставленного в jquery, для запроса данных.Нам нужно запросить только одни данные, но нам нужно ввести всю библиотеку jquery.Это очень неразумно в соответствии с сегодняшней загрузкой по запросу и модульной разработкой, поэтому это решение для выборки и axios
В React рекомендуется использовать axios или fetch для данных запроса Ajax.
- Способ 4: Используйте библиотеку запросов:GitHub.com/request/Энтузиазм…
Это используется не только в Vue, React и других фреймворках, но также поддерживает данные запроса Ajax в апплете WeChat.
Этот модуль запроса также очень популярен и прост в использовании, я не хочу упоминать его здесь, я чувствую себя похороненным.
При использовании сначала установите модуль запроса, а затем установите модуль запроса-обещания, потому что запрос-обещание зависит от запроса, поэтому обе зависимости должны быть установлены по очереди.
npm install -S request
npm install -S request-promise
Затем импортируйте библиотеку request-promise над файлом, где вам нужно использовать данные запроса, и вызовите функцию rp.
import rp from 'request-promise'
Затем сделайте запрос данных AJAX в ComponentDidmount
componentDidMount(){
// 使用request-promise请求数据
// 注意这里的this.baseUrl不支持/api/goodlist.json方式,下面的this.baseUrl是http://localhost:4000/api/goodlist,以及真实的地止,都是可以的
rp(this.baseUrl)
.then(res => {
// 这里要注意的是res返回的是一个字符串,需要用JSON.parse()方法将字符串转化为json对象
const { goodlists } = JSON.parse(res);
this.setState({
list: goodlists
})
})
.catch(error => {
console.log(error);
})
}
Вышеупомянутое предназначено для использования метода «запрос-обещание» для реализации запроса данных Ajax.Обратите внимание, что при использовании этого метода нельзя использовать локальные фиктивные данные.
Он также поддерживает объекты обещаний.Обратите внимание, что когда тип успешного ответа является строковым форматом json, вам нужно использовать JSON.parse()
Преобразуйте строку json в объект json, а затем выполните обработку
Если вы используете axios для запроса данных, вам не нужно форматировать последовательность json.
резюме
Несколько способов запроса данных в React
- Axios (обычно используемый)
- метод fetch (ранние последователи, явно вынужденные)
- jquery Ajax (устаревший)
- запрос (обычно используется, уступает только частоте использования axios)
Уведомление: все помещаются в функцию componentDidMount для запросов данных
Имитировать локальные данные в локальном общедоступном каталоге
Этот метод относительно прост, создайте папку API прямо в публичном каталоге проекта и создайте новый файл json.
Если вы используете axios для запроса данных или выборки, URL-адрес может начинаться с обратной косой черты /, как показано в приведенном выше примере кода, но если это запрос, способ записи URL-адреса в виде обратной косой черты / не будет действовать.
Методом запроса нужно вывести http протокол, который так же поддерживает онлайн интерфейсы
Если вы столкнулись с междоменными проблемами, добавьте Access-Control-Allow-Origin: * в заголовки заголовка запроса.
Это мы представим в инструменте mockoon позже.
react-ajax
├── package-lock.json
├── package.json
├── public // 在该目录下创建一个api文件夹,把需要的模拟的数据放在一个json文件即可
│ ├── api
│ │ └── goodlist.json
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md
├── src
│ ├── App.js
│ ├── index.js
│ └── style.css
└── yarn-error.log
Используйте charles для получения локализованных фиктивных данных
Чарльз является прокси-сервером.Установив себя в качестве прокси-сервера сетевого доступа системы, а затем перехватывая запросы и результаты запросов, достигается цель анализа и захвата пакетов.Программное обеспечение написано на java.При установке charles необходимо сначала установите Java.Плохая среда, то есть настройка плохой среды Jdk
Вот посмотрите на простое конкретное использование charles
Сначала Baidu Baibo Charles загрузит этот инструмент, затем будет установлен следующий шаг.
Использование заключается в следующем:
Если вы не настраиваете прокси-службу charles tool, если поддельный файл данных находится за пределами общедоступного корневого каталога проекта, затем запросите URL-адрес,/api/goodlistбудет неправильно
Другими словами, поддельные данные помещаются в общедоступный каталог, и они могут быть успешно обработаны без использования других прокси-инструментов, таких как charles, потому что webpack в React автоматически обрабатывает их за вас и автоматически находит файлы в общедоступном каталоге.
Конечно кроме charles есть и другие инструменты типа mockoon
Мокайте локальные данные с помощью mockoon
При использовании этого метода вам необходимо перейти на официальную загрузку mockoon tool.
Остановка официального сайта:mockoon.com/
Поддельные данные с Easy Mock
Easy Mock Это инструмент для подделки данных с открытым исходным кодом, созданный технической командой Souche.Это визуальный и постоянный сервис, который может быстро генерировать смоделированные данные.
Остановка официального сайта:easy-mock.com
easy-mock сочетает в себе mock.js, поддерживает интерфейсный прокси, стиль Restful и другие очень полезные функции.
Просто замените baseUrl в приведенном выше коде на онлайн easy-mock.
this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists';
Что касается использования более easy-mock tools, то можете попробовать сами, с ним можно не полагаться на back-end интерфейс, когда back-end интерфейс будет готов, его можно будет заменить напрямую.
резюме
Несколько способов имитировать локальные данные
- Мокнуть локальные данные в локальный публичный каталог (самый простой и грубый, часто используемый)
- Используйте charles для получения локализованных фиктивных данных
- Мокайте локальные данные с помощью mockoon
- Используйте easy-mock для подделки данных интерфейса (рекомендуется для многократного использования)
Суммировать
В этой статье в основном объясняется, как отправлять запросы Ajax в React.Место, куда отправляется запрос, должно находиться в пределах жизненного цикла после монтирования компонента componentDidMount, а методы отправки Ajax включают axios, fetch, Jquery Ajax и методы запроса, где axios и Fetch, запрос является основным способом
В то же время он вводит размещение смоделированных поддельных данных в общей папке корневого каталога проекта, лично мне это кажется очень простым и грубым, но единственный недостаток в том, что вам придется вручную записывать данные самостоятельно.
Использование инструментов charles и mockoon для перехвата локальных запросов и имитации данных требует дополнительной настройки.
Конечно же, я наконец-то представил easy-mock, очень полезный инструмент для имитации поддельных внутренних данных.
Вы можете выбрать один из вышеперечисленных методов имитации данных прокси, который вам нравится.Нет хороших или плохих инструментов.Вы можете использовать его,если он вам нравится.Однако лично я рекомендую использовать easy-mock,но и другие способы неплохи,если это не в сети, вне сети
Тогда другие методы более применимы.Причина, по которой вводятся различные инструменты, в основном состоит в том, чтобы развивать свои собственные идеи.
Если этот инструмент не работает, просто используйте другой, всегда найдется тот, который вам подходит.
Иногда на дереве не повесишься, надо верить, что путей больше, чем трудностей