Ajxa文件：📎axios.js
url
Ajxa 获取数据
axios({
url: `http://wthrcdn.etouch.cn/weather_mini?city=${city}`,
method: 'get' 或 'post',
params：{ 键值对 } 或 data: { // 对象属性简写 username,password}
}).then(res => {
})
获取的一些方法
get与post的语法
常见状态码
获取数据的3种方式
一个一个获取元素进行收集 .value
axios({
url:"http://hmajax.itheima.net/api/books",
method:'POST',
data:{
bookname:bookname.value,
author:author.value,
publisher:publisher.value,
creater:creater.value
}
}).then(res=>{
console.log(res);
})
form-serialize插件
注意点：为表单元素设置name属性 name属性的值一定要参照后台接口的参数名称
serialize(form,{hash:false});
//获取到的 键=值&键=值&键=值....
//如：bookname=a&author=aa&publisher=aaa&creater=aaaa
serialize(form,{hash:true})
//{键：值，键：值，键：值，...}
//如：{bookname: 'a', author: 'aa', publisher: 'aaa', creater: 'aaaa'}
formdata
let formdata=new FormData(form) //form是获取到的表单form
formdata的基本使用
formdata的遍历
如：
// 传递formdata:现在这个接口支持formdata,以后的接口不一定支持--以后再说
// 假设现在接口不支持formdata,只支持key=value | {key:value}
let formdata = new FormData(form)
let obj = {}
// 使用forEach遍历数据 -- 将formdata转换为对象
formdata.forEach(function(value, key) {
console.log(value, key)
obj[key] = value
})
file文件上传
file 多文件上传属性multiple
如：
<input type="file" multiple="multiple"> //加了multiple 属性 就可以进行多文件上传了
file （重点内容：只上传文件数据）
// 重点内容：只上传文件数据
// 1.创建一个空的formdata对象
let formdata = new FormData()
// 2.向formdata中追加文件参数
// 键：后台接口文档的参数名称
// 文件域.files可以获取当前用户所选择的文件对象，它是一个伪数组
// console.log(fileEle.files[0])
// formdata.append('avatar',用户当前选择的文件对象)
formdata.append('avatar', fileEle.files[0])
file多文件上传
file是一个伪数组 可以使用forEach和for来进行遍历
let formdata=new FormData()
for(let i=0;i<file.files.length;i++){
formdata.append('avatar',file.files[i])
}
本地预览
let iptFile = document.querySelector('#iptFile')//file
let thumb = document.querySelector('.thumb') //img
iptFile.addEventListener('change', function() {
// 1.先获取用户所选择的文件对象
let myfile = iptFile.files[0]
// 2.基于文件对象生成一个内存路径
// createObjectURL:将图片存储到内存并返回一个临时路径
let myurl = URL.createObjectURL(myfile)
// 3.为元素赋值
thumb.src = myurl
})
Ajax配值url全局的根路径
添加一个单独的文件进行配置： utils文件夹/request.js文件 （可能也叫base.js）
如：
注意点：在引入axios.js之后 页面资源文件js之前 引入配置文件
如：
****
//配置全局的根路径
//作用：将来发起请求的时候 路径会自动拼接到url前面
axios.defaults.baseURL='服务器地址'
如：// axios.defaults.baseURL='http://hmajax.itheima.net'
写完后 以后都只用写文件路径了
Ajax 原生获取方式
01原生方式发起get无参请求
let xhr =new XMLHttpRequest() //生成一个异步对象 XMLHttpRequest（帮助实现前后端的交互）//XMLHttpRequest是浏览器的内置对象
xhr.open('get','http://hmajax.itheima.net/api/books') //同过open方法进行设置相应行 //相应行 ('请求方式'，'请求地址')
xhr.send() //通过send方法发起请求
xhr.addEventListener('load',function(){ //请求发起后 服务器响应后执行
console.log(JSON.parse(xhr.response)); //接受响应 //获取的是个json字符串 要转换回来
})
总结：1.创建一个异步对象--能够帮助我们实现前后端交互的对象：XMLHttpRequest
XMLHttpRequest:是浏览器的内置对象
2.发起请求--生成符合要求的请求报文
2.1 生成请求行：设置请求方式和请求地址，通过open方法进行设置 -- xhr.open(请求方式，请求地址
2.2 生成请求头:get方式不用设置
2.3 生成请求体：本次请求提交给服务器的数据，get方式的参数在url中拼接，所以get方式没有请求体，只需要发起请求，通过send方法发起请求
3.接收响应：当异步对象发起请求，服务器成功响应，且数据回到客户端可以使用的时候，就会触发一个事件：load
简单说load事件触发说明请求完成了
02原生方式发起get带参请求
let xhr=new XMLHttpRequest() //生成一个异步对象 来进行一个前后端的交互
// 通过open来设置请求行 xhr.open('请求方式',`请求地址？参数=值`)
xhr.open('get',`http://hmajax.itheima.net/api/robot?spoken=${input.value}`)
xhr.send() //发起请求
xhr.addEventListener('load',function(){ //服务器响应加载完 响应
// console.log( xhr.response); //通过response内置方法拿到数据
console.log(JSON.parse(xhr.response)); //因为拿到的是个JSON字符串 所以要经行转换
})
03原生方式发起post请求-参数是key=value （字符串）
let xhr=new XMLHttpRequest() //创建一个异步对象经行前后端的交互
xhr.open('post','http://hmajax.itheima.net/api/books') //通过open设置请求行 （'请求方式','请求地址'）
//键=值 的格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') //通过setRequestHeader设置 请求头
('通过Content-Type设置格式','值')
let data=serialize(addForm,{hash:false}) //通过插件获取值 hash=false：键=值
xhr.send(data) //post通过请求体传递值
xhr.addEventListener('load',function(){
console.log(JSON.parse(xhr.response));
})
04原生方式发起post请求-参数是对象
let xhr=new XMLHttpRequest() //创建一个异步对象来经行一个前后端的交互
xhr.open('post','http://hmajax.itheima.net/api/books')//通过open设置请求行：('请求方式','地址')
xhr.setRequestHeader('Content-Type','application/json')//通过setRequestHeader这只请求头 ('通过Content-Type设置格式',
'设置对象的格式')
let data=serialize(addForm,{hash:true}) //通过插件获取值 hash：拿到的值是对象
xhr.send(JSON.stringify(data)) //通过send设置请求体 因为要传入的是个字符串 用JONS进行准换
xhr.addEventListener('load',function(){
console.log(JSON.parse(xhr.response));
})
05原生方式发起post请求-参数是formdata
// 创建异步对象 来进行前后端交互
let xhr=new XMLHttpRequest()
// 通过open来设置请求行
xhr.open('post','http://hmajax.itheima.net/api/books')
// 通过内置属性formdata来获取值
//因为formdata会自动设置编码格式 Content-type：muitipart/form-data
// 所以请求头可以省略不写
let formdata=new FormData(addForm)
// 通过send属性来设置请求体
xhr.send(formdata)
xhr.addEventListener('load',function(){
console.log(xhr.response);
})
原生方式发起post请求 不同参数类型 请求头的设置
1.参数是key=value&key=value格式：设置格式Content-Type为：application/x-www-form-urlencoded
2.参数是对象格式：设置格式Content-Type为：application/json,同时传递参数的时候将参数转换为json字符串
3.参数formdata：不用设置请求头 因为formdata会自动设置编码格式 Content-type为：muitipart/form-data
Promised的使用
Promised .then 与.catch 的使用
// Promise 是个内置属性
let a1=new Promise(function(resolve,reject ){ //创建 Promise(回调函数 (回参1，回参2){})
let index=parseInt(Math.random()*11) //生成随机数
if(index>=5){ //判断是否大于等于5
resolve('操作成功了--'+index) //大于等于时 调用回参1 resolve（参数）
}else{ //否则
reject('操作失败了--'+index) //调用回参2 reject（参数）
}
})
a1.then(function(res){ //.then的时候 能拿到Promise的回参1 并且可以拿到回参1的参数
console.log(res);
}).catch(function(res2){ //.catch的时候 能拿到Promise的回参2 并且可以拿到回参2的参数
console.log(res2);
})
// Promise的回参1成功的时候调用 回参2失败的时候调用 不过一般不用写回参2 只调用成功的
总结：.then()是拿到Promised的回调函数中的参数1 也可以拿到他传递的参数 成功的时候拿到
.catch()是拿到Promised的回调函数中的参数2 也可以拿到他传递的参数 失败的时候拿到
Promised.all的使用
注意： Promised.all 的括号里 要传入数组 Promised.all(数组) 执行数组里的所有的才执行
function createPro(num){ //封装函数
return new Promise((resolve,reject)=>{ //返回Promise 的值
setTimeout(()=>{ //加一个定时器
resolve(num) //.then的时候拿到该函数的形参
},num*1000) //形参*秒数
})
}
let p1=createPro(1)
let p2=createPro(2)
let p3=createPro(3)
let p4=createPro(4)
Promise.all([p1,p2,p3,p4]).then(res=>{ //Promise.all括号里的传入的所有的执行完才执行.then
console.log(res); //[1, 2, 3, 4] //打印输出数组里所有.then的参数
})
总结：Promise.all：执行所有传入的promise对象，全部执行完毕之后再统一返回结果(将所有promise的执行结果综合在一起) -- 结果是一个数组
all：返回的也是一个promise
Promised.race的使用
注意： Promised.race 的括号里 要传入数组 Promised.race(数组) 谁第一个执行完就立刻结束 不执行其他的
function createPro(num){ //封装函数
return new Promise((resolve,reject)=>{ //返回Promise 的值
setTimeout(()=>{ //加一个定时器
resolve(num) //.then的时候拿到该函数的形参
},num*1000) //形参*秒数
})
}
let p1=createPro(1)
let p2=createPro(2)
let p3=createPro(3)
let p4=createPro(4)
// Promise.race:执行传入的对象，谁第一个执行完毕就立刻结束
Promise.race([p1, p2, p3, p4]).then(res => { //Promise.race括号里的传入的谁第一个执行完就执行.then
console.log(res) //1
})
async函数与await函数 (简化Promise.then方法)
注意：async 标记的函数才能够使用 await
概念：async指异步，说明这个函数会执行异步操作；简化Promise调用时then方法
await可以以同步方式调用异步代码
补充： 1、同步方法：往往有返回值，可以直接接收返回值
2、异步方法：没有返回值，需要传入回调函数，以回调函数的参数接收返回值
function createPro(num){ //封装函数
return new Promise((resolve,reject)=>{ //返回Promise 的值
setTimeout(()=>{ //加一个定时器
resolve(num) //.then的时候拿到该函数的形参
},num*1000) //形参*秒数
})
}
//现在的做法：用 await 获取数据
async function fn(){ // 把await所在的函数 标记为 async 才能使用await
console.log( await createPro(3) ); //await可以拿到.then的回调函数的参数 并且 执行完了这一行 才继续往下执行
console.log(await createPro(1)); //await可以拿到.then的回调函数的 参数 并且 执行完了这一行 才继续往下执行
}
fn() // 结果为 3 1
// 以前的做法：用.then 获取数据-----------------
function fn1(){
createPro(3).then(res=>{
console.log(res);
})
createPro(1).then(res2=>{
console.log(res2);
})
}
fn1() //结果为： 1 3
总结：async 标记的函数才能够使用 await 而且等await所有执行完才往下执行
try...catch语法 (代替Promise.catch方法)
以前出现错误用Promise.catch来抛出错误
现在直接 写再 catch（）的大括号里
补充：1、异步操作的错误，一般通过回调函数处理
2、同步操作的错误，一般通过try…catch处理
语法：
try {
//在此运行代码
}
catch(err){
//在此处理错误
}
运行流程：
try{...}包含块中的代码有错误，则运行catch(err){...}内的代码，
否则不运行catch(err){...}内的代码。
小案例：
// 创建一个promise -- 封装
function createPro(num) {
return new Promise((resolve, reject) => {
// let num = parseInt(Math.random() * 10)
if (num >= 5) {
resolve('本次生成的随机数是：' + num)
} else {
// new Error('本次操作错误了')
reject('错误了')
}
})
}
// 将函数标记为async函数：async指异步，说明这个函数中会执行异步操作
// 异常处理结构：try {可能会出错的代码} catch(err){}
async function doSomthing() {
try {
let res = await createPro(6) //因为传的6>=5
console.log(res) //所以是 调用成功的resolve 并不再往下走
} catch (err) {
console.log(err) //如果上面传递的参数小于5 则执行reject
}
}
// 小总结：
// 1。异步操作的错误，一般是通过回调函数进行处理
// 2。同步操作的错误，一般是能过try..catch处理
doSomthing()
Axios 请求头的设置
headers 是即将被发送的自定义请求头
语法：headers:{键：值}
Axios 全局的 请求头的设置
语法：axios.defaults.headers.ommon['键名']=值
axios.defaults.headers.common['键名']=值
token以请求头经行传递
补充说明：如果要以token以请求头的方式经行传递，且传递的时候键只能叫:Authorization
