ajax笔记

阿文喜欢碎碎唠

已于 2024-05-31 20:37:56 修改

阅读量237

点赞数 6

文章标签：前端 ajax 前端框架

于 2024-04-26 13:53:50 首次发布

本文链接：https://blog.csdn.net/weixin_62189550/article/details/138216726

版权

Ajax

1 ajax基本概念

概念：是浏览器和服务器进行数据通信的技术

使用：

先引用axios库

语法：http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

使用其函数

axios({
	//请求配置
    url:'目的资源地址'
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

2 URL

2.1基本概念

含义：统一资源定位符，网址，用于访问服务器资源
组成：协议：//域名/资源路径

2.2 URL查询参数

让服务器返回浏览器想要的数据
语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

2.3 axios查询参数

作用：axios在运行时会把参数和值拼接到url后

查询参数params是个对象

axios({
	//请求配置
    url:'地址',
    params:{
        参数名：值
        ...
    }
})...

3 常用请求方法

请求方法	操作
GET	获取数据（一般省略）
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

3.1提交数据

axios({
    //请求配置项
    url:'xxx',
    //请求方法
    method:'post',
    //处理的数据
    data:{
       参数名：值
    }
})

3.2获取数据

axios({
    //请求配置项
    url:'xxx',
    //请求方法
    method:'get',
    //处理的数据
    params:{
       参数名：值
    }
})

3.3 上传图片

//点击按钮，用户选择图片，change事件
document.querySelector('.btn').addEventListener('change', e => {
    // 1.获取图片url
    console.log(e.target.files[0])
    //2.利用FormData构造函数，调用append方法携带图片
    const fd = new FormData()
    fd.append('接口参数',url)
    //3.传到服务器
    axios({
        url:'xxx',
        method:'POST',
        data:fd
    }).then(result => {
        //取出图片并显示
        document.querySelector('.my-img').src = result.data.data.接口参数名
    })
})

当接口数据data规定要formdata时要船舰一个对象，再调用方法

4 axios错误处理

语法：在then后用点语法调用catch方法，传入回调参数

axios({//请求选项
}).then(result=>{    
}).catch(error=>{
    //处理错误
})

5 HTTP协议—请求报文

5.1 HTTP协议

含义：规定浏览器发送到服务器返回内容的格式

5.2 请求报文

浏览器按协议要求的格式发送给服务器

5.3 请求报文的组成

请求行：请求方法，URL,协议
请求头：键值对格式的附加信息，
空行：分隔
请求体：发送的资源

5.4 查看方式

通过控制台的“网络”查看，载荷

6 HTTP协议—响应报文

6.1 响应报文

服务器按协议要求的格式发送给浏览器的内容

6.2 响应报文组成

响应行（状态行）：协议，HTTP响应状态码，状态信息
响应头：键值对形式
空行
响应体：返回的资源

6.3 HTTP响应状态码

作用：表示请求是否成功完成，如：404（服务器找不到资源）

状态码	说明
1xx	信息
2xx	成功
3xx	重定向错误
4xx	客户端错误
5xx	服务端错误

通过控制台的“网络”查看，响应

7 接口文档

含义：描述接口的文章
接口的含义：使用AJAX和服务器通讯时，使用的，URL,请求方法，参数

8 form-serialize插件

目的：快速获取表单元素的值
步骤
- 引入js文件<script src="./lib/form-serialize.js"></script>
- 使用serialize函数 const data = serialize(form,{hash:true,empty:true})
  - 参数1：要获取哪个表单的数据
    
    表单元素的name属性的值会作为data对象的属性名
    
    建议name属性值与接口文档参数一致
  - 参数2：配置对象
    
    hash设置数据结构，true为js对象，false为查询字符串
    
    empty设置是否获取空值

9 XMLHttpRequest对象

9.1 基本步骤

创建对象
调用open方法，配置请求方法和url
监听loadend事件
调用send方法，发送请求

let xhr = new XMLHttpRequest()
xhr.open('method',url)
xhr.addEventListener('loadend',()=>{
	//响应结果
    console.log(xhr.response)
})
xhr.send()

9.2 XML查询参数

携带参数：直接写在URL后

如：xhr.open('GET','http://hma.ihen.net/api/city?panme=辽宁省')

语法：

使用URLSearchParams构造函数创建对象
生成指定的字符串

const paramsObj = new URLSearchParams({
    参数名1：值1，
    参数名2：值2
})
const queryString = paramsObj.toString()
//结果：参数名1=值1&参数名2=值2

9.3 XML数据提交

在基本步骤基础上多了设置请求头和请求体（所需数据转成字符串）的步骤

提交的数据作为send方法的参数

语法：

const xhr = new XMLRequest()
xhr.open('method',url)
xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
})
//设置请求头，告知类型
xhr.setRequestHeader('Content-Type','application/json')
//数据转成字符串
const str = {参数1：值1}
const str1 = JSON.stringfy(str)
//携带数据发送请求
xhr.send(str1)

10 Promise对象

10.1 含义

表示一个异步操作的成功/失败及结果值的对象

10.2 语法

语法

// 创建对象
const p = new Promise((resolve,reject)=>{
    //2.执行异步任务-传递结果
    //成功调用：resolve函数返回的值p触发then()
    //失败调用：reject函数返回的值p触发catch()
})
//3.接受结果
p.then(result=>{
    //成功
}).catch(error=>{
    //失败
})

10.3 三种状态

待定 - pending
已兑现 - fullfilled
已拒绝 - rejected

在这里插入图片描述

Promise对象一旦兑现/拒绝，状态无法再改变

10.4 Promise链式应用

做法：用then返回一个promise对象，串联起来

axios和then每次都返回一个promise新对象，在then方法执行相关代码

10.5 Promise.all静态方法

合并多个promise对象，等待所有同时完成再做后续处理

在这里插入图片描述

11 异步代码

11.1 含义

调用后耗时，不阻塞代码执行，完成后触发回调函数

11.2 有哪些异步代码

setTimeout / setInterval
事件
AJAX

靠回调函数接受结果

11.3 回调函数地狱

含义：回调函数嵌套回调函数
问题：
- 可读性差
- 异常捕获差
- 耦合性严重

模块间联系越多，其耦合性越强，同时表明其独立性越差( 降低耦合性，可以提高其独立性)

12 async和await关键字（异步）

12.1使用

用async声明的函数是AsyncFunction的构造函数实例，里面是一些异步的代码。里面使用await关键字取代then，返回获取Promise对象成功的结果

12.2 错误捕获

利用try和catch代码块

语法：

try {
    //要执行的代码块
} catch （error）{
    //接受错误信息
    //try里面只要出现错误便无法继续执行后面的代码
}

13 事件循环

13.1 含义

是执行代码和收集异步任务的模型，在调用栈空闲时，反复调用任务队列里回调函数

13.2 原因

js是单线程，不阻塞JS引擎

13.3执行过程

先执行同步，异步交给宿主浏览器环境执行
执行完浏览器推入任务队列排队
当调用栈空闲时，反复调用任务队列里的回调函数

先同步后异步

13.4宏任务和微任务

宏任务：浏览器执行的代码

如：JS执行脚本事件，定时器，AJAX请求完成事件，用户交互事件
微任务：JS引擎执行的异步代码

如：Promise对象的then回调
执行过程：
- 先执行宏任务里的第一个JS执行脚本事件，里面同步代码
- 当执行栈空闲时，先执行完微任务队列，再执行宏任务队列

14 实战

14.1 访问权限token

作用：确定用户有无访问网页的权限，本质是字符串
如何形成？正确登陆后由后端签发并返回

前端只能检查有无token,后端才能检查token是否正确
使用过程
- 单独写一个JS文件，检查本地有无token，否则跳转至登录页
- 将js文件应用于需要登录的html文件（引入外部js方式）
- 登录js文件，成功后本地存储服务器返回的token，并跳转至指定页面

14.2 axios请求拦截器

作用：发起请求前对请求参数进行额外配置
何时使用？在公共配置时，统一设置在拦截器中
语法：

调用 Axios 库的 interceptors 对象的 request 方法，用于添加一个请求拦截器,两个参数都是回调函数

axios.interceptors.request.use(function(config){
    const token= localStorage.getItem('token')
    //逻辑中断
    token && （config.headers.Authorization = `Bearer ${token}`）
    return config
}, function (error){
    return Promise.reject(error)
})

14.3axios响应拦截器

作用：在回到then/catch前，拦截函数对相应的结果先做处理
何时出发成功或失败的拦截函数？
- 状态码为2xx触发成功回调
- 其他则触发失败回调
回调函数里要先判断状态码
语法：

Axios 提供的拦截器函数，用于拦截发出的请求的响应。它接受两个参数：第一个是成功时的处理函数，第二个是失败时的处理函数

axios.interceptors.response.use(function(response){
    //2xx状态码都会触发该函数
    return response
}, function （error){
    //超出2xx的状态码都会出发该函数
    //如身份验证失败是401
    if(error?.response?.status === 401) {
        alert('登录过期，请重新登录！')
        localStorage.clear()
        location.href = '../login/index.html'
    }
    return Promise.reject(error)
})

阿文喜欢碎碎唠

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ajax笔记

语法：http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js。作用：axios在运行时会把参数和值拼接到url后。含义：规定浏览器发送到服务器返回内容的格式。概念：是浏览器和服务器进行数据通信的技术。服务器按协议要求的格式发送给浏览器的内容。浏览器按协议要求的格式发送给服务器。通过控制台的“网络”查看，载荷。通过控制台的“网络”查看，响应。查询参数params是个对象。
复制链接

扫一扫