promise将ajax变为同步,ES6-Promise改造异步请求为同步

1.扩展：ajax

1.1 代码如下

$.ajax({

url:'地址',

type:'get/post',

data:{},

dataType:'json/jsonp',

success:function(res){

//请求成功，接收返回值

}

})

1.2 概念

ajax不能跨域请求

两个网址：协议 主域号 端口号 完全相同时，这时两个网址完全相同，任意其一不同，即为跨域请求

解决跨域：

1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式

2.cors:需要后台配合

3.后台设置允许所有或指定网址能直接访问

简写形式：

$.get(url,data,function(res){})

$.post(url,data,function(res){})

2.jQuery里的Promise

2.1 个人理解

同步：同时只能做一件事 代码简单

异步：操作之间没有关系 同时请求进行多个操作，小程序中可用于请求数据api接口，代码更复杂,用同步一样的方式，来书写异步代码

Promise.all([$.ajax(),$.ajax()]).then(result=>{alert('对了')},err=>{alert('错了')})

2.2 代码如下

高版本jquery中Promise

// 高版本jquery中Promise自带封装函数

Promise.all([

$.ajax({

url: 'arr.txt',

dataType: 'json'

})

]).then(function(arr) {

alert('成功');

let [res1, res2] = arr;

alert(res1);

alert(res2);

}, function() {

alert('失败');

});

3.Promise怎么用

3.1 利用函数赋值来返回请求数据

Promise怎么用

let p = new Promise(function(resolve, reject) {

// 异步代码

// resolve——成功了

// reject——失败了

$.ajax({

url: 'arr.txt',

data: {},

dataType: 'json',

success: function(arr) {

//请求成功，接收返回值

resolve(arr);

},

error(err) {

reject(err);

}

});

});

// 原先js时

p.then(function() {

alert('成功');

}, function() {

alert('失败');

});

3.2 利用函数参数来进行promise操作返回请求数据

Promise怎么用

// 封成函数,进行参数传递即可

function createPromise(url) {

return new Promise(function(resolve, reject) {

// 异步代码

// resolve——成功了

// reject——失败了

$.ajax({

url: 'arr.txt',

data: {},

dataType: 'json',

success: function(arr) {

//请求成功，接收返回值

resolve(arr);

},

error(err) {

reject(err);

}

});

});

}

// let p1 = new Promise(function(resolve, reject) {

// // 异步代码

// // resolve——成功了

// // reject——失败了

// $.ajax({

// url: 'arr.txt',

// data: {},

// dataType: 'json',

// success: function(arr) {

// //请求成功，接收返回值

// resolve(arr);

// },

// error(err) {

// reject(err);

// }

// });

// });

// let p2 = new Promise(function(resolve, reject) {

// // 异步代码

// // resolve——成功了

// // reject——失败了

// $.ajax({

// url: 'arr.txt',

// data: {},

// dataType: 'json',

// success: function(arr) {

// //请求成功，接收返回值

// resolve(arr);

// },

// error(err) {

// reject(err);

// }

// });

// });

// 现在js时

Promise.all([

// p1, p2

// 简化操作

createPromise('arr.txt')

]).then(function(arr) {

alert('成功');

let [res1, res2] = arr;

alert(res1);

alert(res2);

}, function() {

alert('失败');

});