方式一:
原生请求,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))