原生ajax
基于jQuery的ajax
axios
jquery的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:"http://localhost:3000/api/getmsg",
// type:"get",//请求方式
success(res){
console.log(res)
},
error(err){
console.log(err)
}
})
$.get('http://localhost:3000/api/getmsg',(res)=>{
console.log(res)
})
// $.post
</script>
</body>
</html>
promise的其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
<script>
try {
console.log('a',a)
let a = 8
} catch (error) {
console.log('error',error)
}
function fun(URL,TYPE,Data){
return new Promise((resolve,reject)=>{
$.ajax({
url:`http://localhost:3000/${URL}`,
type:TYPE,
data:Data,
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
}
// console.log(fun())
// .then()得到异步任务正确的结果
fun("api/getmsg",'get').then((res)=>{
console.log('then里面的res',res)
},(err)=>{
console.log('then里面的err',err)
// .catch()获取异常信息
}).catch(err=>{
console.log('err',err)
// .finally()成功与否都会执行
}).finally(()=>{
console.log('不管成功还是失败都走他')
})
</script>
</body>
</html>
promise的all方法和race方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
<script>
function fun(URL,TYPE='get',Data){
return new Promise((resolve,reject)=>{
$.ajax({
url:`http://localhost:3000/${URL}`,
type:TYPE,
data:Data,
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
}
let promise1 = fun('api/promisedata1')
let promise2 = fun('api/promisedata2')
let promise3 = fun('api/promisedata3')
Promise.all([promise1,promise2,promise3]).then(res=>{
// 把你得到的数据都放到一个数组里面了
console.log(res)
})
Promise.race([promise1,promise2,promise3]).then(res=>{
// 谁跑的快就运行谁就返回谁
console.log(res)
})
</script>
</body>
</html>
aixos的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
// get请求
axios.get('http://localhost:3000/api/getmsg').then(res=>{
console.log(res)
})
axios.get('http://localhost:3000/api/getaxios3',{
params:{
id:999
}
}).then(res=>{
console.log(res)
})
//post请求
axios.post('http://localhost:3000/api/postmsg',{
firstName: 'Fred',
lastName: 'Flintstone'
}).then(res=>{
console.log(res)
})
axios.get('http://localhost:3000/api/getaxios4/99999').then(res=>{
console.log(res)
})
axios.delete('http://localhost:3000/api/deleteaxios1',{
params:{
name:'小明'
}
}).then(res=>{
console.log(res)
})
// delete请求和get传参一样
// put请求和post请求传参一样
axios.put('http://localhost:3000/api/putaxios1',{
name:'小明'
}).then(res=>{
console.log(res)
})
</script>
</body>
</html>
axios的全局配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
//配置公共的请求头
axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.headers['toekn'] = 'token'
axios({
url:"/api/getaxios3",
params:{
tel:"1008811"
}
}).then(res=>{
console.log(res)
})
</script>
</body>
</html>
aixos的拦截器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
// 添加请求拦截器
// 请求拦截器的作用是在请求发送前进行一些操作
// 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log(config);
config.headers['xiao']='xiao'
//这里一定要return 否则配置不成功
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
// 响应拦截器的作用是在接收到响应后进行一些操作
// 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log(response);
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
axios.defaults.baseURL = 'http://localhost:3000';
// axios.defaults.headers['toekn'] = 'token'
axios({
url:"/api/getaxios3",
params:{
tel:"1008811"
}
}).then(res=>{
console.log(res)
})
</script>
</body>
</html>