Estudie el uso del paquete ajax de notes-react y la configuración del proxy

---

React se da cuenta de la importante función de obtener datos de forma dinámica. El envío de ajax en react generalmente usa fetch. Y debido a problemas entre dominios, es necesario configurar un proxy.

1. Instalación del paquete de recuperación: 

Ingrese el siguiente código en la ventana de comandos en la carpeta del proyecto:

yarn add isomorphic-fetch

2. Paquete ajax:

Cree una nueva carpeta llamada utils en la carpeta src del proyecto y cree un nuevo archivo http.js en utils. Y use export default para exportar la función encapsulada, será muy conveniente importarla y usarla en la página requerida.

import fetch from 'isomorphic-fetch';

function http(url, options={}) {
        // 告知服务器通过body节点携带的数据，按json字符串格式来理解和使用
        options.headers = {
                "Content-Type": "application/json",
                "Authorization": sessionStorage.getItem("token")
        };
        // 将调用http方法配置body携带的数据进行json字符串化
        if(options.body) options.body = JSON.stringify(options.body);
        return fetch(url, options)
        // 第一个then拿到的是fetch返回的结果，并不一定是服务器返回的结果
                .then(response => {
                        if(response.status === 200) return response;
                        else throw new Error(response.statusText);
                })
                .then(response => response.json())
                .then(({ code, data, msg }) => {
                        switch(code) {
                                case 200: return data;
                                case 401:
                                case 404:
                                case 199:
                                case 500:
                                default:
                                        throw new Error(msg);
                        }
                })
                .catch(error => {
                        alert(error.message);
                        // 返回一个永远是pending的Promise对象
                        return new Promise(() => {});
                })
}

export default http;

3. Configure el proxy:

Puede configurar un proxy en package.json para resolver problemas entre dominios.

"proxy": "http://localhost:3000/"

También puede modificar el número de puerto:

"scripts": {
		"start": "set PORT=8888&&react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
},

4. Envíe ajax:

import http from '../../utils/http.js';    // 导入http

// class中
async componentDidMount() {
    // 组件挂载完毕
    let listMain = await http("/category/list/0");
    let listSub = await http("/category/list/1");
    this.setState({  listMain, listSub, activeId: 1 });
}

Lo anterior es el paquete ajax y su uso, y cómo resolver problemas entre dominios. Con ajax, podemos obtener datos de forma dinámica.