之前实现过使用jQuery-Ajax跨域请求,写过一个专题:jQuery-Ajax实现跨域
Promise实现跨域
使用Promise也可以实现跨域请求。
普通的Promise模板:
var p = new Promise(function (resolve, reject) {
// 这里用于实现异步任务
setTimeout(function () {
var flag = true;
if (flag) {
// 正常情况
resolve('hello');
} else {
// 异常情况
reject('出错了');
}
}, 100);
});
p.then(function (data) {
//从resolve得到正常结果
console.log(data)
}, function (info) {
//从reject得到错误信息
console.log(info)
});
对于Promise实现跨域请求,要使用到XMLHttpRequest()方法,通过这个方法获取到请求的响应信息。详细内容可看:XMLHttpRequest
写一个关于Promise的Ajax请求函数:
function queryData(url) {
var p = new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
//回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
} else {
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
在本机使用node的express框架,部分截图如下:
实现一个简单的请求:
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data);
},function(info){
console.log(info)
});
express模块写响应方法和监听方法:
//请求方式,URL 请求响应结果
app.get('/data', (req, res) => {
res.send('Hello World!')
})
// 启动监听
app.listen(3000, () => {
console.log('running...')
})