Promise 的基本使用

为了解决回调地狱问题，从而给出的解决办法：

/*** Promise** 1. Promise 是 一个构造函数  new Vue()* 2. Promise() 里面有个参数, 参数就是一个回调 () => {}*    回调也有参数*    resolve f 操作成功的时候调用resolve  => 调用 resolve => then()*    reject  f 操作失败的时候调用reject* 3. 在 Promise里面放一个异步操作/*** 1. p 什么类型 Promise类型* 2. axios.get() Promise 类型* 3. axios.get().then()* 4. p.then()* xxxx.then() xxxx 大多数就是个promise*/const p = new Promise((resolve, reject) => {console.log('准备开始执行异步操作了')// 举例 : 来一个异步操作setTimeout(() => {// 假如操作成功了  成功 == resolve == then// resolve('成功了')// 假如操作失败了  失败 == reject == catchreject('失败了')}, 1000)
})p.then(res => {console.log('走then了', res)
}).catch(err => {console.log('走catch了', err)
})// axios.get().then()

读取多个文件时可以使用：


ml_read('./a.txt').then(res => {console.log('a', res)return ml_read('./b.txt')}).then(res => {console.log('b', res)return ml_read('./c.txt')}).then(res => {console.log('c', res)})

async … await … 的使用

let fs = require('fs')
/*** @name ml_read* @desc 读取多个文件* @param* @return*/
function ml_read(path) {//1. 创建 promise 实例let p = new Promise((resolve, reject) => {fs.readFile(path, 'utf-8', (err, data) => {if (err) {return reject('错误了')}resolve(data)})})//2. 返回 这个 promise 实例return p
}
// **************************** 上面是封装好的 promise 函数 ml_read  ***********/***  async 和 await 是 es8 提出来的*  作用 : 一种(编写同步代码的方式)处理异步的解决方案 , 处理的更加彻底**  async  修饰一个(内部有await)函数   async  function test() { }*  await  修饰一个promise, 等待一个promise的结果       await promise类型*/async function test() {// then 其实就是等待一个结果(res)// ml_read('./a.txt').then(res => {//    console.log(res)// })// await 其实也是等待一个结果(res)let resa = await ml_read('./a.txt')console.log(resa)let resb = await ml_read('./b.txt')console.log(resb)let resc = await ml_read('./c.txt')console.log(resc)
}test()/***  使用了*  需求 : a => b => c*/
// ml_read('./a.txt')
//   .then(res => {//     console.log('a', res)
//     return ml_read('./b.txt')
//   })
//   .then(res => {//     console.log('b', res)
//     return ml_read('./c.txt')
//   })
//   .then(res => {//     console.log('c', res)
//   })

注意点及 try … catch … 的使用：

1.async 和 await 要成对出现

* 缺少async : SyntaxError: await is only valid in async function

* 缺少await : 打印的就是 promise 类型

* 2. 如何处理 async 和 await 的异常情况

* try…catch() 如果没有问题 => 跳过 catch, 如果有问题就会被catch 捕获

* 3. async 就近原则, async 添加到 await最近的函数前面 (小心回调)

三种状态：

Promise的三种状态

* pending 待定

* fulfilled 完成 <== resolve() 成功

* rejected 拒绝 <== reject() 失败

测试：对`Ajax`进行`Jquery`封装

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title></head><body><script src="./node_modules/jquery/dist/jquery.js"></script><script>//http://localhost:3000// $.ajax({//   // 类型//   type: 'get',//   // 接口//   url: 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8',//   // 参数//   data: {},//   // 数据返回类型//   dataType: 'json',//   // 成功//   success: res => {//     console.log('成功', res)//   },//   // 失败//   error: err => {//     console.log('失败', err)//   },// })// 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8'// 自己手写三遍function ml_ajax(options) {// 1. 创建 promise 实例let p = new Promise((resolve, reject) => {$.ajax({// 类型type: options.method || 'get',// 接口url: options.url,// 参数data: options.data || {},// 数据返回类型dataType: 'json',// 成功success: res => {// console.log('成功', res)resolve(res)},// 失败error: err => {// console.log('失败', err)reject(err)},})})// 2. 返回promise 实例return p}let url = 'http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8'ml_ajax({url,}).then(res => {console.log('666', res)})</script></body>
</html>

Promise 的基本使用与 Ajax的jQuery封装相关推荐

Ajax之Jquery封装使用举例2（Json和JsonArray处理）
本例主要使用ajax进行异步数据请求,并针对返回数据为json和jsonarray类型的数据处理. 本例中只有前端的代码,后端代码不是本文重点,故省略. 后端接口返回数据为: Json: {" ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
$.ajax data怎么处理_不会吧，不会吧，不愧是Ajax，jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
AJAX(三)jQuery AJAX.post
在jQuery 中也提供了一个比较简单的ajax请求jQuery.post(url, [data], [callback], [type]),如果考虑出错时执行函数该方法不适合,请选择ajax 相对j ...
jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)
使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX) 我正在尝试编写一个JQuery自动完成脚本,它将通过AJAX调用url并在用户将数据输入表单时更新自 ...
Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
第一章：AJAX与jQuery
AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...

Promise 的基本使用与 Ajax的jQuery封装

Promise 的基本使用

读取多个文件时可以使用：

async … await … 的使用

注意点及 try … catch … 的使用：

三种状态：

测试：对`Ajax`进行`Jquery`封装

Promise 的基本使用与 Ajax的jQuery封装相关推荐

最新文章

热门文章

Promise 的基本使用 与 Ajax的jQuery封装

Promise 的基本使用

读取多个文件时可以使用：

async … await … 的使用

注意点及 try … catch … 的使用：

三种状态：

测试：对Ajax进行Jquery封装

Promise 的基本使用 与 Ajax的jQuery封装相关推荐

最新文章

热门文章

Promise 的基本使用与 Ajax的jQuery封装

测试：对`Ajax`进行`Jquery`封装

Promise 的基本使用与 Ajax的jQuery封装相关推荐