本文介绍Promise + Fetch + Axios + 模块化 + 同步异步
目录
1. Promise
1.1 Promise简介
1.2 resovle
1.3 reject & finally
2. Fetch
2.1 get请求
2.2 post请求
3. Axios
4. 模块化开发
5. 同步异步
同步
异步
async
await
1. Promise
1.1 Promise简介
Promise 是一个对象，表示承诺在未来的某个时刻可能会完成并返回结果
对于某些需要时间来处理结果的操作, 如用户登录、读取文件等
可以使用 Promise 对象来执行异步操作
Promise 对象有三种状态：
pending (待处理)
fulfilled (已履行)
rejected (被驳回)
当创建一个 Promise 对象时, 它的初始状态为 pending, 表示异步执行还未完成
① 异步执行成功：
调用 resolve函数把 Promise对象的状态改变为 fulfilled, 通过 then方法来获取异步操作的结果
② 异步执行异常：
调用 reject函数把 Promise 对象的状态更改为 rejected, 可通过 catch 方法来处理错误
注：异步操作是指在程序执行过程中, 某个操作不会立即返回结果, 而是需要一段时间的等待
1.2 resovle
// 创建Promise对象 变量存储其引用// new一个Promise()且内部是箭头函数的形式// 两个参数代表解决和驳回 (resolve,reject) => {}let promise = new Promise((resolve,reject) => {// 当已经完成要处理的事情后 编写resolve()函数 // ()内部写要返回的内容resolve('已完成');});console.log(promise); // 1.初始时 [[PromiseState]]: "pending" 待处理// 2.完成后输出的内容：// [[PromiseState]]: "fulfilled" // resolve调用后显示该状态// [[PromiseResult]]: "已完成" // ()内部返回的结果// 同时可以通过.then()返回异步操作的结果// 对象名.then((参数一般result) => {}) 箭头函数形式promise.then((result) => {// result用来接收已完成的内容console.log(result); // 已完成}) 1.3 reject & finally
// 另一种情况 驳回 rejectedlet promise1 = new Promise((resolve,reject) => {// 没有完成的情况// 调用reject()函数reject('未完成');});console.log(promise1); // Uncaught (in promise) 未完成// 对未完成的情况进行捕获// .then(() => {}).catch(() => {})promise1.then((result) => {console.log(result);}).catch((error) => {// .catch((参数一般error)=>{})// 参数用来接收捕获的未完成的内容// 捕获信息console.log(error);}).finally(() => {// 异步结束之后调用 不管如何返回一个结果console.log('异步结束');})// resolve()对应then catch对应reject()// 不论调用resolve还是reject都需要写最后的结果 .finally(() => {})// 整体类似java中的try catch finally2. Fetch
fetch 是基于 Promise 的 api, 它可以发送http请求并接收服务器返回的响应数据
fetch 返回的是一个 Promise 对象
2.1 get请求
//get请求fetch('http://127.0.0.1/get').then(response => {// 返回的解析后的json数据// 会传递给下一个 then() 方法中的回调函数作为参数// 这个参数就是 datareturn response.json() //response.json() 用于将响应数据解析为json格式的数据}).then(data => { //data 是解析后的json数据console.log("get.data:", data)}).catch(error => {console.log("get.error:", error.message)}).finally(() => {console.log("get.finally")})2.2 post请求
//post请求 postfetch('http://127.0.0.1/post', {method: 'POST', // 指定了post// 请求头headers: {'Content-Type': 'application/x-www-form-urlencoded'}, // 请求体 body: new URLSearchParams({// URLSearchParams 用于处理 键值对类型 的数据// 并将其编码为url查询字符串name: 'zzz',web: 'baidu.com',}),}).then(response => {return response.json()}).then(data => {console.log("post.data:", data)}).catch(error => {console.log("post.error:", error.message)}).finally(() => {console.log("post.finally")})//post请求 postJsonfetch('http://127.0.0.1/postJson', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({//JSON.stringify 用于将对象转换为json字符串name: 'zzz',web: 'www.baidu.com',}),}).then(response => {return response.json()}).then(data => {console.log("postJson.data:", data)}).catch(error => {console.log("postJson.error:", error.message)}).finally(() => {console.log("postJson.finally")})3. Axios
Axios 是基于 Promise 的网络请求库, 它可以发送http请求并接收服务器返回的响应数据
Axios 返回的是一个 Promise 对象
Axios 不仅可以用于浏览器, 也可以用于 Node.js, 而 Fetch 主要用于浏览器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/*Axios 是基于 Promise 的网络请求库, 它可以发送http请求并接收服务器返回的响应数据Axios 返回的是一个 Promise 对象Axios 不仅可以用于浏览器, 也可以用于 Node.js, 而 Fetch 主要用于浏览器*///get请求axios.get('http://127.0.0.1/get').then(response => {console.log("get.data:", response.data)// 直接获得响应数据}).catch(error => {console.log("get.error:", error)}).finally(() => {console.log("get.finally")})//post请求 postlet data = { //参数name: 'zzz',web: 'baidu.com',}axios.post('http://127.0.0.1/post', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(response => {console.log("post.data:", response.data)}).catch(error => {console.log("post.error:", error)}).finally(() => {console.log("post.finally")})//post请求 postJson [axios 的默认请求头是 application/json]axios.post('http://127.0.0.1/postJson', data).then(response => {console.log("postJson.data:", response.data)}).catch(error => {console.log("postJson.error:", error)}).finally(() => {console.log("postJson.finally")})</script>
</body>
</html>4. 模块化开发
模块化开发是指将复杂的代码拆分为独立的模块,每个模块负责完成特定的功能。
不同的模块之间可以通过使用 export 关键字将代码导出为模块。
其他模块可以使用 import 关键字导入该模块。
index.html:
<script type="module">// import导入import {title,web,getWeb} from './模块化开发.js'console.log(title);console.log(web);console.log(getWeb());</script>index.js:
let title = 'zzzweb';
let web = 'baidu.com';let getWeb = () => {return 'www.baidu.com';
}// 导出
export {title,web,getWeb};
起别名和导出整体：
<script type="module">// import导入import {title as WebTitle,web,getWeb} from './模块化开发.js'// 当导出一个整体时// import * as obj from './模块化开发.js'; 将整体导出为一个对象// 别名 // 原 as 别console.log(WebTitle); // 对象为 obj.titleconsole.log(web);console.log(getWeb());</script>let title = 'zzzweb';
let web = 'baidu.com';let getWeb = () => {return 'www.baidu.com';
}// 导出
export {title,web,getWeb};// 完全导出
// export default {title,web,getWeb};
// 导出一个对象5. 同步异步
同步
代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行
当遇到耗时的操作(如网络请求等)时,主线程会被阻塞,直到该操作完成
举例
在单车道路段上发生交通事故导致交通堵塞, 只有拖走事故车辆后, 后续车辆才能继续行驶
异步
当遇到耗时的操作发生时, 主线程不会被阻塞, 会继续执行后续的代码, 而非等待耗时操作完成
举例
在具有多车道的高速公路上, 发生交通事故后, 可以走其他车道继续行驶
async
当一个函数被标记为 async 后, 该函数会返回一个 Promise 对象
await
只能在 async 函数内部使用, 加上 await 关键字后, 会在执行到这一行时暂停函数的剩余部分，
等待网络请求完成,然后继续执行并获取到请求返回的数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="axios/dist/axios.min.js"></script>
</head><body><script>//回调地狱是指过度使用嵌套的回调函数,导致代码难以阅读和维护//get请求axios.get('http://127.0.0.1/get').then(response => {console.log("get.data:", response.data)if (response.data.data.web == "baidu.com") {//get请求2return axios.get('http://127.0.0.1/article/get/id/1').then(response2 => {console.log("get2.data:", response2.data)if (response2.data.data.name == "zzz") {//get请求3return axios.get('http://127.0.0.1/article/get/search/title/入门').then(response3 => {console.log("get3.data:", response3.data)})}})}}).catch(error => {console.log("get.error:", error)}).finally(() => {console.log("get.finally")})//async/await 使用同步的方式编写异步代码, 避免回调地狱//优势 在处理多个异步操作的情况下, 可以使代码更简洁易读const getData = async () => {try {//get请求const response = await axios.get('http://127.0.0.1/get')console.log("async.get.data:", response.data)if (response.data.data.web === "baidu.com") {//get请求2const response2 = await axios.get('http://127.0.0.1/article/get/id/1')console.log("async.get2.data:", response2.data)if (response2.data.data.name === "zzz") {//get请求3const response3 = await axios.get('http://127.0.0.1/article/get/search/title/入门')console.log("async.get3.data:", response3.data)}}} catch (error) {console.log("async.get.error:", error)} finally {console.log("async.get.finally")}}getData()</script>
</body></html>本文介绍Promise + Fetch + Axios + 模块化 + 同步异步
