ajax学习

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);
});