React-请求网络的两种方式

方式一:

原生请求,react自带的fetch请求方式

            fetch(opt.url, {
                
                method: opt.type,
                body: data,
                headers: {
                    'content-type': opt.contentType
                }
            }).then(res => {
                res.json().then((data) => {
                   console.log(data)
                })
            }).catch(e => {
                 console.log(e)
            });

方式二

ajax请求,react通过jquery的ajax方法进行请求网络

            $.ajax({
                type: opt.type,
                url: opt.url,
                data: data,
                dataType: 'json',
                contentType: opt.contentType,
                cache: false,
                success(data) {
                    console.log(data)
                },
                error(xhr, type) {
                    console.log(xhr)
                }
            });

---

通过自己的封装更加方便

可以通过Promise对象,进行封装,原生方法本身返回就是一个Promise对象.

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

promise.then() 是 promise 最为常用的方法。

promise.then(onFulfilled, onRejected)

promise简化了对error的处理，上面的代码我们也可以这样写：

promise.then(onFulfilled).catch(onRejected)

通过Object.assign进行非配options

requestInPromise(options = {}) {
        const opt = Object.assign({}, {
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {}
        }, options);
        let self = this;
        return new Promise(function (resolve, reject) {
            let data = opt.data;
            if (opt.type.toUpperCase() === 'POST'
                && opt.data
                && opt.contentType.indexOf('application/json') > -1) {
                data = JSON.stringify(opt.data);
            }
            //上述两种请求方式都可以放在这里
            ...
        });
    },

甚至可以通过Promise的all方法,同时请求多个接口,结果会在then里面返回顺序数组

Promise.all(
//封装的Promise
)
.then(datas=>{
    console.log(datas)
})
.catch(e=>console.log(e))