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('失敗');

});

總結

以上是生活随笔為你收集整理的promise将ajax变为同步,ES6-Promise改造异步请求为同步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。