Ajax + Promise复习简单小结simple

最新推荐文章于 2024-07-26 15:05:55 发布
最新推荐文章于 2024-07-26 15:05:55 发布
阅读量633 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NOfighting/article/details/132650140
版权

axios使用

先看看老朋友 axios
axios是基于Ajax+promise封装的
看一下他的简单使用
安装：npm install axios --save
引入：import axios from 'axios'

GitHub地址

基本使用

axios({url: 'http://hmajax.itheima.net/api/province'}).then(function (result) {
		const {data: {list, message}, status} = result
		console.log(list, message, status)
})
// 发送 GET 请求（默认的方法）
axios('/user/12345').then(response => {}).catch(error => {})

查询参数

axios({
	url: 'http://hmajax.itheima.net/api/city',
	method: 'get',
	params: {
		pname: '河南省'
	}
}).then(function (result) {
	// const {data: {list, message}, status} = result
	console.log(result)
})

post提交

document.querySelector('button').addEventListener('click', function () {
	axios({
		url: 'http://hmajax.itheima.net/api/register',
		method: 'post',
		data: {
			username: 'itheima123',
			password: '123456'
		}
	}).then(function (result) {
		console.log(result)
	})
})

错误处理

document.querySelector('button').addEventListener('click', function () {
		axios({
			//请求选项
			url: 'http://hmajax.itheima.net/api/register',
			method: 'post',
			data: {
				username: 'itheima123',
				password: '123456'
			}
		}).then(function (result) {
			//处理数据
			console.log(result)
		}).catch(function (error) {
			//处理错误
			console.log(error.response.data.message)
		})
	})

实现一个简单地图片上传在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		img {
			height: 200px;
			width: auto;
			border-radius: 20px;
			border: 1px solid rebeccapurple;
		}
	</style>
</head>
<body>
<input type="file" class="upload">
<img/>
</body>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript">
	/*
	* 图片上传显示在网页上面
	* 1. 获取图片文件
	* 2. 使用 FormData 携带图片文件
	* 3. 提交到服务器获取到返回的图片服务器地址*/
	document.querySelector('input').addEventListener('change', function (e) {
		console.log(e.target.files[0])
		//FormData对象
		const fd = new FormData()
		fd.append('img', e.target.files[0])
		axios({
			url: 'http://hmajax.itheima.net/api/uploadimg',
			method: 'post',
			data: fd
		}).then(function (result) {
			console.log(result)
			document.querySelector('img').src = result.data.data.url
		}).catch(function (error) {
			console.log(error)
		})
	})
</script>
</html>

XMLhttpRequest使用

/*get请求携带参数*/
/*1. 实例化一个xhr对象*/
const xhr = new XMLHttpRequest()
/*2. 配置请求方法和URL地址*/
xhr.open('get', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
/*3. 添加load事件，获取响应结果*/
xhr.addEventListener('load', function (result) {
	console.log(JSON.parse(result.target.response))
	document.write(JSON.parse(result.target.response).list.join(' , '))
})
/*4. 发起请求*/
xhr.send()
	
/*post请求设置请求头，携带请求体*/
document.querySelector('button').addEventListener('click', () => {
	const xhr = new XMLHttpRequest()
	xhr.open('post', 'http://hmajax.itheima.net/api/register')
	xhr.addEventListener('load', function (result) {
		console.log(JSON.parse(result.target.response))
	})
	/*设置请求头 告诉服务器 内容类型*/
	xhr.setRequestHeader('Content-Type', 'application/json')
	const user = {username: 'itheima093', password:' 123456'}
	const userStr = JSON.stringify(user)
	/*将字符串类型的 请求体发送给服务器*/
	xhr.send(userStr)
})

详细文档参照 MDN

同步异步

  • 同步代码
    • 逐行执行，原地等待结果后，才继续向下执行
  • 异步代码
    • 调用后耗时，不阻塞代码执行，将来完成后触发回调函数

JavaScript中的异步代码有
- setTimeout / setInterval
- 事件
- Ajax

异步代码接收结果！
- 依靠异步的回调函数接收结果

回调地狱

在回调函数中一直向下嵌套回调函数，就会形成回调函数地狱

/*毁掉地狱*/
	new MyAxios({
		url: 'http://hmajax.itheima.net/api/province'
	}).then(result => {
		console.log(result)
		let province = document.querySelector('.province')
		province.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
		new MyAxios({
			url: 'http://hmajax.itheima.net/api/city',
			params: {pname: province.value}
		}).then(result => {
			console.log(result)
			let city = document.querySelector('.city')
			city.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
			new MyAxios({
				url: 'http://hmajax.itheima.net/api/area',
				params: {pname: province.value, cname: city.value}
			}).then(result => {
				console.log(result)
				let area = document.querySelector('.area')
				area.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
			})
		})
	})

缺点：
- 可读性差
- 异常捕获困难
- 耦合性严重

解决：
promise的链式调用
使用then函数返回新的Promise对象的特性一直串联下去

/*链式调用*/
	let province = document.querySelector('.province')
	new MyAxios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
		console.log(result);
		province.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
		return new MyAxios({url: 'http://hmajax.itheima.net/api/city', params: {pname: province.value}})
	}).then(result => {
		console.log(result);
		let city = document.querySelector('.city');
		city.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
		return new MyAxios({url: 'http://hmajax.itheima.net/api/area', params: {pname: province.value, cname: city.value}})
	}).then(result => {
		console.log(result);
		let area = document.querySelector('.area');
		area.innerHTML = result.list.map(item => `<option>${item}</option>`).join('')
	})
使用async 和 await解决（最优）
/*async await 配合使用*/
async function init() {
	let province = document.querySelector('.province')
	let city = document.querySelector('.city');
	let area = document.querySelector('.area');
	console.log('开始执行异步代码')
	/*错误捕获； try 代码块中出现了错误，代码就不会继续往下执行了*/
	try {
		const provinceList = await new MyAxios({url: 'http://hmajax.itheima.net/api/province'})
		province.innerHTML = provinceList.list.map(item => `<option>${item}</option>`).join('')
		const cityList = await new MyAxios({url: 'http://hmajax.itheima.net/api/city', params: {pname: province.value}})
		city.innerHTML = cityList.list.map(item => `<option>${item}</option>`).join('')
		const areaList = await new MyAxios({url: 'http://hmajax.itheima.net/api/area', params: {pname: province.value, cname: city.value}})
		area.innerHTML = areaList.list.map(item => `<option>${item}</option>`).join('')
		console.log(provinceList)
		console.log(cityList)
		console.log(areaList)
	}catch (error) {
		console.dir(error)
	}finally {
		console.log('finally')
	}
}

Promise

Promise 对象表示异步操作最终的完成（或失败）以及其结果值。

三个状态：
pending (初始状态，既没有兑现也没有拒绝) => fulfilled(操作成功) / rejected(操作失败)
Promise对象一旦被兑现或拒绝，就代表该对象就已敲定了，状态将无法在改变

优点：

  • 逻辑更清晰
  • 有助于了解axios的内部运作机制
  • 解决回调函数地狱问题(通过链式调用 then 返回一个新的Promise对象

基本使用

/*使用promise管理异步任务*/
const p = new Promise((resolve, reject) => {
	setTimeout(function () {
		//resolve() => fulfilled状态-已兑现 => then()
		// resolve('成功')
		//reject() => rejected状态-已兑现 => catch()
		reject(new Error('失败'))
	}, 2000)
})

console.log(p)

p.then(result => {
	console.log(result)
}).catch(error => {
	console.log(error)
})

PromiseAll

/*当我们需要执行几个Promise对象，同时获取他们的结果时，使用Promise静态方法Promise.all([])*/
const ps = Promise.all([new Promise(resolve => resolve(1)), new Promise(resolve => resolve(2))])
// 这里的result是一个数组
ps.then(result => console.log(result))
const p1 = new Promise(resolve => resolve(3))
const p2 = new Promise(resolve => resolve(4))
const p3 = new Promise((resolve, reject) => {
	reject('错误1')
})
const p4 = new Promise((resolve, reject) => {
	reject('错误2')
})
// 当执行的过程中发生错误是，会中断执行并抛出第一个错误
Promise.all([p1, p2, p3, p4]).then(result => {
	console.log(result)
}).catch(error => {
	console.log(error)
})

Promise 配合 XMLHttpRequest使用

<script type="text/javascript">
	
	const p = new Promise((resolve, reject) => {
		const xhr = new XMLHttpRequest()
		xhr.open('get', 'http://hmajax.itheima.net/api/city?pname=湖南省')
		xhr.addEventListener('loadend', function (result) {
			if (result.target.status === 200) {
				resolve(JSON.parse(xhr.response))
			} else {
				reject(new Error(xhr.response))
			}
		})
		xhr.send()
	})
	
	console.log(p)
	
	p.then(result => {
		console.log('执行成功', result)
	}).catch(error => {
		//错误对象要是用console.dir详细打印
		console.dir('执行错误', error)
	})
</script>

XMLHttpRequest 配合 Promise进行简单封装和使用

// 封装为一个函数 MyAxios，返回的是一个Promise对象
function MyAxios({method = 'get', url, params, data}) {
    //返回一个Promise对象
    return new Promise((resolve, reject) => {
        /*1. 实例化一个xhr对象*/
        const xhr = new XMLHttpRequest()
        /*判断是否有传参，有传参拼接在URL后面*/
        url = params ? url + function () {
            const keys = Object.keys(params)
            const values = Object.values(params)
            return '?' + keys.map((item, index) => item + '=' + values[index]).join('&')
        }() : url
        // console.log(url)
        xhr.open(method, url)
        // 有请求体，给请求头设置请求体文本类型
        xhr.setRequestHeader('Content-Type', 'application/json')
        /* 添加load事件，获取响应结果 */
        xhr.addEventListener('loadend', function () {
            /*200-300之间的状态码为响应成功状态码*/
            if (xhr.status >= 200 && xhr.status < 300) {
                /*返回的内容类型为JSON字符串，对它进行解析并返回*/
                resolve(JSON.parse(xhr.response))
            } else {
                reject(new Error(xhr.response))
            }
        })
        /*判断是否为post请求*/
        data ? xhr.send(JSON.stringify(data)) : xhr.send()
    })
}

/*get请求 传参*/
/*new MyAxios({
    method: 'get',
    url: 'http://hmajax.itheima.net/api/area',
    params: {
        pname: '河北省',
        cname: '石家庄市'
    }
}).then(result => {
    console.log(result)
}).catch(error => {
    console.log(error)
})*/

/*post请求*/
/*new MyAxios({
    method: 'post',
    url: 'http://hmajax.itheima.net/api/register',
    data: {username: 'itheima095', password:' 123456'}
}).then(result => {
    console.log(result)
}).catch(error => {
    console.log(error)
})*/

/*获取城市天气*/
/*new MyAxios({
    method: 'get',
    url: 'http://hmajax.itheima.net/api/weather',
    params: {
        city: '110100'
    }
}).then(result => {
    console.log(result)
}).catch(error => {
    console.log(error)
})*/

/*获取天气案例*/
document.querySelector('.search-city').addEventListener('input', debounce(fun, 500))
const ul = document.querySelector(`ul`)
function fun(e) {
    console.log('发送请求', e.target.value)
    new MyAxios({
        url: 'http://hmajax.itheima.net/api/weather/city',
        params: {
            city: e.target.value
        }
    }).then(result => {
        console.log(result)
        ul.innerHTML = result.data.map(item => `<li data-code="${item.code}">${item.name}</li>`).join('')
    }).catch(error => {
        console.log(error)
    })
}
ul.addEventListener('click', function (e) {
    const li = e.target
    if (li.tagName === 'LI') {
        console.log(li.dataset.code);
        new MyAxios({
            method: 'get',
            url: 'http://hmajax.itheima.net/api/weather',
            params: {
                city: li.dataset.code
            }
        }).then(result => {
            console.log(result)
        }).catch(error => {
            console.log(error)
        })
    }
})
//防抖函数
function debounce(fun, delay = 500) {
    let timer = null
    return function (e) {
        if (timer)
            clearTimeout(timer)
        timer = setTimeout(function () {
            fun(e)
            timer = null
        }, delay)
    }
}
多喝热水，重启试试
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2021react复习
qq_49215659的博客
02-27 394
《千锋HTML5好程序员第三阶段React》学习材料——古艺散人 （自己加了一点笔记更改，算作转载吧 一、create-react-app 全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app your-app 注意命名方式 Creating a new React app in /dir/your-app. Installing packages. This might take a co.
【学相伴】接入OSS后访问速度快了10倍
狂神说
06-19 4527
问题场景一个thymeleaf项目，上传图片、视频是直接使用Java代码保存到服务器上于是服务器压力激增，网页静态资源变得卡顿于是我们需要将图片、视频上传移植到阿里云OSS上阿里云对象存储...
左耳听风——笔记二：程序员练级攻略
热门推荐
页页的博客
10-26 5万+
左耳听风——笔记二：程序员练级攻略
redux启示与实践
weixin_34174422的博客
06-30 86
redux三原则及data flow 单一数据源 状态只读 使用纯函数来改变状态 稍微注意一下，这些原则，在redux的实现中是一点也没体现出来。 In a very real sense, each one of those statements is a lie! -- 摘自tao-of-redux 而这些原则是指导你如何使用redux 数据流 counter demo ...
HTML+CSS+ajax+php+mysql实现登录
09-30
3. **Ajax**：AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下更新部分网页的技术。在这个项目中，`js`文件夹中的JavaScript代码（如`ajax.js`）可能包含了使用`XMLHttpRequest`对象实现...
Ajax的小贴士使用小结
01-21
在使用Ajax过程中，有时候总会遇到一些难题，浏览器兼容、编码、IE下的特殊处理等等，偶尔会搞的人头昏脑胀哭笑不得，这里列一些小贴士，或许有些用。 使用Javascript库 Ajax的流行和巨大威力，让我们重新审视了...
Ajax 的六个误区小结分析
12-09
就像以前流行过的闪烁字体、“溅水”页(译者：Splash page －Flash动画或大图片做的网站的简介首页，往往有个“跳过简介”或“直接进入”的小按钮)、和使用圆角（译者：见YeeYan首页抬头，呵呵），只是这次动态性...
PHP ajax+jQuery 实现批量删除功能实例代码小结
10-17
主要介绍了PHP ajax+jQuery 实现批量删除功能实例代码小结,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Jquery操作Ajax方法小结
11-22
**jQuery 操作 AJAX 方法小结** 在 Web 开发中，jQuery 的 AJAX 功能极大地简化了与服务器进行异步数据交互的过程。AJAX (Asynchronous JavaScript and XML) 是一种技术，它允许网页在不重新加载整个页面的情况下从...
某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC]
薛定谔嘚喵博客
07-23 460
某数据泄露防护(DLP)系统是一款综合性的数据安全产品，旨在通过多种先进技术手段保护企业的敏感数据，防止数据泄露。某数据泄露防护(DLP)系统存在SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感数据。
网站基本布局CSS
m0_46608027的博客
07-24 808
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 790
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 261
【代码】TS如何处理js模块的类型？
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 453
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
技术实践—微前端技术应用
最新发布
iOceanMind的博客
07-26 492
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
前端开发知识-vue
modi000的博客
07-26 212
2.在javascript标签中创建vue对象，数据模型。一、vue可以简化前端javascript的操作。可以src中可以是vue的网址，也可以是本地下载。1.javascript中引入vue.js。主要特点是可以实现视图、数据的双向绑定。二、ngix是前端使用的主流服务器。后端使用的主流服务器是tomcat。3.在body体中，实现视图（标签）绑定。
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 780
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 602
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多喝热水，重启试试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值