目录
9、笔试题/面试题：fetch ajax axios 的区别
一、路由
数据接口
前端发送布局数据请求时 后端提供数据
接受参数 发送前端想要的数据
静态资源接口
前端发送网络请求 后端提供静态资源(磁盘中文件)
静态资源托管==>网址和托管的目录对应起来
二、网络请求
1、AJAX:网页局部刷新数据的技术
//2.创建网络请求对象
var xhr=new window.XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP")
//2.建立连接
xhr.open("GET", "http://localhost:81/hqyj")
//3.发送网络请求
xhr.send()
//4.监听网络状态的变化
//readyState==>1 2 3 4
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
//5.当网络状态为4的时候,代表数据包已经发送过来了
//状态码为200代表是这个接口原来制定的接口数据格式
if (xhr.readyState == 4&&xhr.status==200) {
//6.解析数据
console.log(JSON.parse(xhr.responseText))
var data=JSON.parse(xhr.responseText)
//7.使用数据DOM操作局部渲染刷新页面
div.innerHTML=data.xx.xx
}
}2、回调函数设计封装ajax工具
回调函数就是异步的一种体现
回调函数
tool("/login",cb)
tool函数一般是执行任务的函数 当这个任务执行完毕时调用传入的cb函数 然后开始运行cb的代码
在这种设计中 cb函数就是我们说的回调函数
回调函数来设计一个网络请求工具
tool("/login",cb)
tool函数就是一个简单的封装了ajax请求的工具
在tool内部 去用ajax请求传入的第一个参数"/login"对应网址
当请求返回数据时 就把数据传给cb函数使用(调用cb)
tool函数可以单独的放在一个too.js中，然后在html文件中直接用script引用就可以用了
function tool(methd, url, cb) {
var xhr = new XMLHttpRequest()
xhr.open(methd, url)//可以选择拼接时间戳,兼容低版本ie的缓存问题
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
cb(data)
}
}
}
//使用:tool("get","www.hqyj.com/api",(data)=>{console.log(data)})tool函数是同步函数，cb传进去没有调，等到异步发生了才调用。xhr.onreadystatechange相当于一个异步的
3、回调地狱
先访问了ajaxq1，才能访问ajax2，一次类推，按照平时的写法写的话，就非常的玛法，套用了很多级，就不好看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<button>地狱回调</button>
<script>
$.get("/sheng",(res)=>{
conosle.log("所有省")
$.get(res中的第三个省拼接成参数发给"/city",(res2)=>{
conosle.log("所有市")
$.get(res中的第2个市拼接成参数发给"/qu",(res2)=>{
conosle.log("所有区")
$.get(res中的第2个市拼接成参数发给"/qu",(res2)=>{
conosle.log("所有区")
$.get(res中的第2个市拼接成参数发给"/qu",(res2)=>{
conosle.log("所有区")
$.get(res中的第2个市拼接成参数发给"/qu",(res2)=>{
conosle.log("所有区")
//无线的套，就是地狱回调
})
})
})
})
})
})
</script>
</body>
</html>
上面的套用不现实，所以就可以用promise来优化
4、promise / async语法
具体参考:重温JS——（ES6）异步编程（promise对象、async函数）_爱喝牛奶~的博客-CSDN博客
1）promise
1.promise是系统提供的构造函数(ES6出的),其实这种设计在ES5已经出现了
2.它被设计成一个全局构造函数,它构造的对象有两个方法then和catch
promise这个函数创建出来的对象,是一个特殊的数据容器
这个数据容器内部有三种状态: 等待==>产生正确的数据 \ 错误的数据
3.then和catch方法要求 调用时传入函数作为参数
4.new Promise((result,faild)=>{}) 创建对象时要求传一个函数参数==>也就是在这个函数中处理耗时业务
4.1 构造对象时 内部会帮你执行这个耗时的回调函数 当耗时操作产生结果时:
调用函数的result参数==>这时实际上就是调用了then方法传入的函数
调用函数的faild参数==>这时实际上就是调用了catch方法传入的函数
5.then方法的返回值:
1)如果then方法调用时传入的函数 的返回值是一个Promise对象,它的返回值就是这个Promise对象
2)如果then方法调用时传入的函数 的返回值不是一个Promise对象 它的返回值就是一个新的Promise对象并且包装了then方法调用时传入的函数的返回值(将传入函数的返回值封装为promise对象,进行返回)
6. catch函数==> 捕获错误:
无论catch里面写不写代码,都不会让下面的代码停止运行
7.理论
new Promise((result,faild)=>{})在处理耗时操作的过程中 会有3个状态
1.处理中 没有调用result,faild这个方法 ==> pending
2.生成正确的结果 调用result
3.生成错误结果 调用faild
8.promise的执行顺序
虽然这个promise是同步的,但是可以再次执行异步任务
then函数是异步的
事件循环:
异步任务分为:异步宏任务:计时器 和
2）async
1.给函数一个async来修饰
2.函数内部用await来修饰带promise设计的异步函数 就会直接得到结果 不需要调用then方法来获取数据
3.async修饰的函数的返回值是一个then方法调用的返回值(同promise)
function fn1 (arg) {
return new Promise((result,faild)=>{
result(arg+10)
})
}
async function fn2 () {
var re=await fn1(2)
// console.log(re)
var re2=await fn1(re)
// console.log(re2)
var re3=await fn1(re2)
// console.log(re3)
return re3
}
var re=fn2()5、Promise设计封装ajax工具
function myaxios (url) {
return new Promise((result,faild)=>{
try{
var xhr=new XMLHttpRequest()
xhr.open("GET",url)
xhr.send()
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText,result)
result(xhr.responseText)
}
}
}catch(e){
faild(e)
}
})
}
//使用1:
div1.onclick=function(){
myaxios("网址1").then((data1)=>{
console.log(data1)
return myaxios("网址2")
}).then((data2)=>{
console.log(data2)
})
}
//使用2:
div2.onclick=async function(){
var data1=await myaxios("网址1")
console.log(data1)
var data2=await myaxios("网址2")
console.log(data2)
}6、jQuery框架的ajax(了解)
1、jQuery现在已经不怎么用了
2、知识
2.1综合的方法 $.ajax({})
在对象的属性去配置请求的相关功能
选项:(所有选项都是可选的)
type:String//请求方式,默认get
url:String//请求的地址
async:Boolean//(默认: true) 默认设置下，所有请求均为异步请求。如果发送同步请求，设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
dataType:String//预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数
"json": 返回 JSON 数据 。
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 html 返回 "text/html")。错误的 MIME 类型可能导致不可预知的错误
如果dataType设置为"script"，那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)
cache:Boolean//(默认: true,dataType为script时默认为false)，设置为 false 将不会从浏览器缓存中加载请求信息。
timeout:times//超时时间,单位毫秒.如果设置该选项,当请求没有在指定时内完成,请求会取消并触发error回调,回调状态码为'timeout',默认为0:请求完成之前永不取消
contentType:String//(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data:String//发送的参数:"count=25&maxid=29448"。可以填对象,但是属性值如果为数组，jQuery 将自动为不同值对应同一个名称。如:{karen:["46", "singer"]} 转换为 '&karen=46&karen=singer'
error:function//请求失败时的回调
function (XMLHttpRequest, textStatus, errorThrown) {
//参数：XMLHttpRequest 对象、错误状态、捕获的错误对象
// 通常 textStatus 和 errorThrown 之中只有一个会包含信息
//this指向$.ajax(options)的options参数对象
}
//function(data,)
success:function(data,sta,xhr)//请求成功的回调,三个参数:第一个响应的数据(服务器响应的是什么类型的数据,这里就是对应的类型:比如响应json那这里就是json格式的数据,响应script这里就是加载的js文本). 第二个jq状态码,一般都是"success". 第三个发送请求的XMLHttpRequest对象,如果是js的请求(dataType:’script’),第三个参数是没有值得
2.2 抽象出来的单一方法
----load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中
$(element).load(url,data,function(response,status,xhr))
url:地址
data:可选,发送的参数。
function(response,status,xhr)
可选,请求完成时的回调
response:结果数据
status:请求的状态（"success", "error", "timeout" 或 "parsererror"）
xhr:XMLHttpRequest对象
例:
$("#btn1").click(function(){
$("div1").load('test.txt')
})
-----$.get(url,data,callback(response,status,xhr))//如果需要请求出错时的回调函数，请使用 $.ajax方法
url 必需。
data(可选)发送到服务器的参数
success(response,status,xhr)
可选。请求成功的回调函数
response 结果数据
status 请求的状态
xhr XMLHttpRequest 对象
例:
$.get('http://xxx',function(data){console.log(data)})
----$.getJSON(url,callback(data,status,xhr))//如果需要请求出错时的回调函数，请使用 $.ajax方法
url 必需。地址//注意jsonp的请求:http://xxxxx?name=kraren&callback=?问号就填为问号,随机帮我们取名字,然后数据帮我们封装到回调函数的data里
callback(data,status,xhr)
可选。成功的回调函数
data结果数据
status请求的状态
----$.post(url,data,callback(data, textStatus, jqXHR),dataType)
//如果需要请求出错时的回调函数，请使用 $.ajax方法
url 必需,请求地址
data//(可选)待发送 Key/value 参数
success(data, textStatus, jqXMLHttpRequest)//(可选)请求成功时执行的回调函数。(回调函数的参数就不讲了)
dataType//(可选)规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）
2.3抽象出来的一些方法
$.get(url,(data)=>{})
$.post(url,(data)=>{})
$.getJSON()
$.ajax({method:"post" url:"" success:()=>{} err:()=>{}})
3、jQuery-ajax——使用
1.引入jQuery cnd （在字节跳动静态资源公共库==> cnd.bytedance.com）中搜JQuery
2、将网址复制，放在html文件中的scrpit的src中。它返回一个全局函数，名为==> $
它可以.get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//这就是映入jquery库
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<h1>这是car.html</h1>
<button onclick="fn()">点我</button>
<script>
function fn() {
$.get("/car", function(res) { //找到后端的cae的网址，将数据请求过来
console.log(res, 123)
})
}
</script>
</body>
</html>
7、axios框架的ajax
在项目中使用最频繁的方式之一,常见于框架开发
//不带参数的
axios.get(url)
.then((data)=>{})
.cath((err)=>{})
//带参数的
axios.get(url,{params:{xx:xxx}})
.then((data)=>{})
.cath((err)=>{})
//post
axios.post(url,{xx:xxx})
.then((data)=>{})
.cath((err)=>{})
axios.defults.baseURL
8、axios 和 Fecth
1、axios
引入axios库（（在字节跳动静态资源公共库==> cnd.bytedance.com）中搜axios
（相当于进入了js文件，js文件的底层是peomise封装ajax，然后就有了axios网络请求工具）
（网络请求有三个：AJAX、JSONP、fetch。axios只是网络请求工具）
用then去取，得到一个对象，对象里面有一个属性data，里面是后端发过来的数据，而且已经被解析为对象了
axios是封装的函数库
前端html文件中代码：
var p1=axios('/ajax1') //可以填绝对网络路径、根路径
p1.then((data)=>{
console.log(111111111,data.data)
return axios('/ajax2')
})
.then((data2)=>{
console.log(data2.data)
return axios('/ajax3')
})
.then((data3)=>{
console.log(data3.data)
return axios('/ajax4')
})
.then((data4)=>{
console.log(data4.data)
})
.catch((e)=>{
console.log(e)
})2、Fecth
可以在以下网址进行查看语法：
它被称为下一代Ajax技术，采用Peomise方式来处理数据，是一种简介明了的API，比XMLHttpRequest更加简单易用
fetch它是浏览器自带的API，fecth不用引任何文件，fecth是原生的。它的底层没有用到ajax
所以前端的网络请求就分为三种：AJAX、JSONP、Fetch
后端不能用fetch
前端html文件中代码：
fetch("/ajax3")
.then((res)=>{
return res.json()
})
.then((data)=>{
console.log(data)
})9、笔试题/面试题：fetch ajax axios 的区别
答案：
ajax 是最早出现发送后端请求的技术，属于原生 js 范畴,核心是使用 XMLHttpRequest
对象,使用较多并有先后顺序的话，容易产生回调地狱。
fetch号称可以代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery
中的 ajax 类似，它并不是对 ajax 进一步封装，它属于原生 js 范畴。没有使用
XMLHttpRequest 对象。
axios 不是原生 js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在
请求和相应阶段进行拦截，基于 promise 对象。
10、async-await
高内聚低耦合:任何程序员共同的设计目标
await：ES7出的（2017）
promise：ES6出的，不好的是要一直串then函数
指针函数：ES6末期
化异步为同步
缺点：浏览器必须是2017年以后的版本
打包工具可以转码，会把它翻译为ES5，所以不用担心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 用axios网络请求工具 -->
<script src='https://s1.pstatp.com/cdn/expire-1-M/axios/0.19.2/axios.js'></script>
</head>
<body>
<button onclick="fn()">load</button>
<script>
async function fn(){ //这里可以不写function 可以写方法、普通函数、箭头函数，只要是async修饰的
//await必须放在函数内部，并且函数还必须是async修饰的
//await可以让程序停下来，等待任务做完，才运行下面的代码
let data1=await new Promise((n1,n2)=>{n1(2000)})
console.log(data1) //await会让程序阻塞在这里，等这里的网络请求完毕后，再进行下面的网络请求
//上面的data1是2000
let data2=await axios('/ajax2') //axios的返回值是一个promise对象，await是把promise对象取出来
console.log(data2)
let data3=await axios('/ajax3')
console.log(data3)
let data4=await axios('/ajax4')
console.log(data4)
}
</script>
</body>
</html>
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
