Ajax
是异步的Javascript和XML。简单来说就是XMLHttpRequest对象与服务器通信
1.axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://ajax-api.itheima.net/api/province', //请求的地址
headers: { 参数名: `值`} //在请求头里加参数
}).then(res => {
console.log(res), //请求的数据
})
//设置基地址 请求地址时,如果写完整的直接指向,如果写后缀会自动拼接
axios.defaults.baseURL = '基地址'
</script>
url:统一资源定位符,简称网址,用于访问网络资源
组成: 协议+域名(对应的服务器)+资源路径
查询参数:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法 url+?+参数名1=值&参数名2=值...
axios({
url: '地址',
params:{
参数名: 值, //简写:参数名和变量值的名相同可只写一个
}
})
请求方法
axios({
url: '地址',
method: '请求方法', //默认为get不区分大小写
data:{
//提交的数据
参数名: 值
}
})
/*1.get 获取数据*/
/*2.post 提交数据*/
/*3.put 修改数据(全部)
*/
/*4.delete 删除数据
*/
/*5.patch 修改数据(部分)
*/
错误处理
axios({
}).then(err=>{}).catch(err =>{
// 错误信息
})
HTTP协议:规定浏览器发送和服务器返回内容的格式
请求报文:浏览器按照HTTP协议要求的格式,发送给服务器的内容
请求行:请求方法、url,协议等
请求头:以键值对的格式附加信息 如:Content-Type 数据格式
空行:用于分隔
请求体:发送的资源
响应报文:服务器按照HTTP协议要求的格式,发送给浏览器的内容
响应行:协议,HTTP响应状态码,请求地址等
响应头:以键值对的格式附加信息 如:Content-Type 数据格式
空行:用于分隔
响应体:返回的资源
HTTP响应状态码: 1xx(信息)、2xx(成功)、3xx(重定向消息)、4xx(客户端错误)、5xx(服务端错误) 。如404服务器找不到资源
form表单元素快速获取
//form-serialize插件
//引入插件
//hash:为true获取的是对象,false查询为字符串
//empty:是否获取空值
serialize(表单元素, { hash: true, empty: true})
常用基础
//事件监听
e.target.files //监听的文件列表,如上传图片
//是否包含哪个类
元素对象.classList.contains('类名')
//新建表单对象
const fd = new FormData()
fd.append('表单元素', 表单的值) //添加表单元素
fd.set('表单元素', 表单的值) //修改
fd.get('键') //获取
fd.has('键') //是否含有
fd.delete('键') //删除
// ?.(可选链式运算符) err?.mess?.sta === 1 err有值再访问mess有值在访问sta,如果没有值返回undefined,不会报错 如const a = null (a.c报错) (a?.c undefined)
//?? 判断变量是否是null或undefined,是则返回默认值 判断的变量 ?? 默认值
/*
//获取当前网址
location.search
//提取网址的拼接字符串,返回一个对象然后用foreach可以遍历
const p = new UMLSearchParams(网址)
p.foreach((key, index) => {})
*/
ajax原理
axios内部采用XMLHttpRequest与服务器交互
XMLHttpRequest使用
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求地址')
//loadend 加载完成调用
xhr.addEventListener('loadend', () => {
//响应结果 xhr.response 返回的是JSON字符串
})
xhr.send(请求的数据可为空) //发送请求
xhr.status //响应状态码
//查询参数
const par = new URLSearchParams({
参数名: 值,
参数名: 值,
...
}).toString() //结果: 参数名1=值&参数名2=值
//请求头
xhr.setRequestHeader('键', '值')
Promise 对象用于表示一个异步操操作的最终完成或失败及其结果值(可解决回调地狱)
const p = new Promise((resolve, reject) => {
//执行异步任务并传递结果
//成功调用:resolve(值) 触发then() 如resolve('请求成功') 传递给res
//失败调用:reject(值) 触发catch() 如reject(new Error('失败'))传递给err
})
p.then(res => {})
p.catch(err =>{})
//合并promise对象(成功的结果和合并的顺序一样)
const p = Promise.all(要合并的promise对象, ...)
//解决回调地狱
1.用promise.then()返回值返回一个新的promise来解决
2.async和await
封装简易axios
function mes(config){
return new Promise((resolve, reject) => {
const xtr = new XMLHttpRequest()
//查询参数
if(config.params){
const params = new UMLSearchParams(config.params)
params = params.toString()
config.url += `?${params}`
}
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', ()=>{
if(xhr.status >=200 && xhr.status <300){
resolve(JSON.parse(xhr.reponse))
}else{
reject(new Error(xhr.response))
}
})
//data数据
if(config.data){
const dataJson = JSON.stringify(config.data)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(data)
}else{
xhr.send()
}
})
}
const data = {
url: 'http://hmajax.itheima.net/api/province',
}
mes(data).then(res =>{
console.log(res)
}).catch(err => {
console.log(err.message)
})
宏任务:由浏览器环境执行的异步代码(如:定时器、交互事件、ajax请求完成事件等)
微任务:由JS引擎环境执行的异步代码(如:promise().then方法)
调用栈会先调用微任务,再宏任务
token:访问权限的令牌,本质时一串字符串,由后端返回
axios拦截器(请求前重复的操作可以写在拦截器里)
//请求拦截器 在请求axios之前触发
axios.interceptors.request.use(config => {
// Do something before request is sent
return config;
},error => {
// Do something with request error
return Promise.reject(error);
});
//响应拦截器 在服务器响应后触发,在then/catch之前,根据响应状态码来判断2xx就成功,其他失败
axios.interceptors.response.use(response => {
// Do something before response is sent
return response;
},error => {
// Do something with response error
return Promise.reject(error);
});