接口调用方式 -- 总结
原生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>