学习笔记——react的ajax封装使用及设置代理

拼搏现实的明天。 2022-11-22 05:30 275阅读 0赞

--------------------

> react实现动态获取数据的重要功能。在react中发送ajax一般使用fetch。并且由于跨域问题，需要设置代理。

### 1.fetch包的安装：  ###

> 在项目文件夹中的命令窗口输入以下代码：

yarn add isomorphic-fetch

### 2.封装ajax： ###

> 在项目的src文件夹下新建一个名为utils的文件夹，在utils中新建http.js文件。并用export default导出封装好的函数，在需要的页面导入使用就会很方便。

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.设置代理： ###

> 可以在package.json中设置代理，来解决跨域问题。

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

> 也可以修改端口号：

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

### 4.发送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 });
    }

> 以上就是ajax封装及其使用，和如何解决跨域问题。有了ajax我们就可以动态获取数据。