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

---

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我们就可以动态获取数据。