ES6-Promise承诺
时间:2020-05-22
本文章向大家介绍ES6-Promise承诺,主要包括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 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高版本jquery中Promise</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
// 高版本jquery中Promise自带封装函数
Promise.all([
$.ajax({
url: 'arr.txt',
dataType: 'json'
})
]).then(function(arr) {
alert('成功');
let [res1, res2] = arr;
alert(res1);
alert(res2);
}, function() {
alert('失败');
});
</script>
</head>
<body>
</body>
</html>
3.Promise怎么用
3.1 利用函数赋值来返回请求数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise怎么用</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
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('失败');
});
</script>
</head>
<body>
</body>
</html>
3.2 利用函数参数来进行promise操作返回请求数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise怎么用</title>
<script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
// 封成函数,进行参数传递即可
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('失败');
});
</script>
</head>
<body>
</body>
</html>
原文地址:https://www.cnblogs.com/dongxuelove/p/12935484.html
- Python开发微信公众号后台(系列一)
- Consul最常用的命令和接口api
- webpack的Hot Module Replacement运行机制
- 如何使用Node.js编写命令工具——以vue-cli为例
- SpringBoot编写自定义的starter
- webpack3新特性简介
- Python机器学习算法入门之梯度下降法实现线性回归
- IronPython 2.0 beta 5
- node.js如何制作命令行工具(一)
- (28) 剖析包装类 (下) / 计算机程序的思维逻辑
- Linux进程监控工具Supervisor简易使用教程
- (29) 剖析String / 计算机程序的思维逻辑
- (27) 剖析包装类 (中) / 计算机程序的思维逻辑
- Python量子力学计算模拟以及数据可视化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 02Python数据结构之再谈List的常用操作
- 03Python List不得不知的操作之改、查
- 04Python基础之字符串Str
- 05Python元组tuple的个性
- Tkinter Canvas
- Python实现最小二乘法
- 一个简单的例子学明白用Python插值
- python 类class基础简明笔记
- 数据离散化及其KMeans算法实现的理解
- [tensorflow损失函数系列]sparse_softmax_cross_entropy_with_logits
- 怎样将Anaconda设置为国内的镜像
- Python实现KMeans算法
- Python面向对象编程
- HTML和CSS常见问题整理
- Nginx Linux详细安装部署教程