axios初入门
- 开源代码
- 2025-07-21 19:25:32
1,axiox的基本使用 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>axios基本使用</title> <link crossorigin="anonymous" href=" cdn.bootcss /twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src=" cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> </head> <body> <div class="container"> <h2 class="page-header">基本使用</h2> <button class="btn btn-primary"> 发送GET请求 </button> <button class="btn btn-warning" > 发送POST请求 </button> <button class="btn btn-success"> 发送 PUT 请求 </button> <button class="btn btn-danger"> 发送 DELETE 请求 </button> </div> <script> //获取按钮 const btns = document.querySelectorAll('button'); //第一个 btns[0].onclick = function(){ //发送 AJAX 请求 axios({ //请求类型 method: 'GET', //URL url: 'http://localhost:3000/posts/2', }).then(response => { console.log(response); }); } //添加一篇新的文章 btns[1].onclick = function(){ //发送 AJAX 请求 axios({ //请求类型 method: 'POST', //URL url: 'http://localhost:3000/posts', //设置请求体 data: { title: "今天天气不错, 还挺风和日丽的", author: "张三" } }).then(response => { console.log(response); }); } //更新数据 btns[2].onclick = function(){ //发送 AJAX 请求 axios({ //请求类型 method: 'PUT', //URL url: 'http://localhost:3000/posts/3', //设置请求体 data: { title: "今天天气不错, 还挺风和日丽的", author: "李四" } }).then(response => { console.log(response); }); } //删除数据 btns[3].onclick = function(){ //发送 AJAX 请求 axios({ //请求类型 method: 'delete', //URL url: 'http://localhost:3000/posts/3', }).then(response => { console.log(response); }); } </script> </body> </html> 2,默认配置 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>axios基本使用</title> <link crossorigin="anonymous" href=" cdn.bootcss /twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src=" cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> </head> <body> <div class="container"> <h2 class="page-header">基本使用</h2> <button class="btn btn-primary"> 发送GET请求 </button> </div> <script> //获取按钮 const btns = document.querySelectorAll('button'); //默认配置 axios.defaults.method = 'GET';//设置默认的请求类型为 GET axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL axios.defaults.params = {id:100}; axios.defaults.timeout = 3000;// btns[0].onclick = function(){ axios({ url: '/posts' }).then(response => { console.log(response); }) } </script> </body> </html> 3,设置拦截器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="axios.js"></script> </head> <body> <script> //设置请求拦截器 axios.interceptors.request.use(function (config) { console.log("请求拦截成功") config.params={a:100} return config },function (error) { return Promise.reject(error) }) //设置响应 axios.interceptors.response.use(function (response) { console.log("响应成功") return response.data; },function (error) { console.log("响应器拦截失败 失败1号") return Promise.reject(error) }) //发送请示 axios({ method:"GET", url:"http://localhost:3000/posts" }).then(response=>{ console.log("自定义回调处理成功的结果") console.log(response) }) </script> </body> </html> 4,取消请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link crossorigin='anonymous' href=" cdn.bootcss /twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src=" cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> </head> <body> <div class="container"> <h2 class="page-header">axios取消请求</h2> <button class="btn btn-primary"> 发送请求 </button> <button class="btn btn-warning" > 取消请求 </button> </div> <script> //取消按钮 const btns = document.querySelectorAll('button') //2,声明全局变量 let cancel = null; btns[0].onclick=function () { if(cancel!==null){ cancel() } } axios({ method:"GET", url:"http://localhost:3000/posts", cancelToken:new axios.cancelToken(function (c) { cancel=c; }) }).then(response=>{ console.log(response) cancel=null }) //绑定第二个事件取消请求 btns[1].onclick=function () { cancel(); } </script> </body> </html> 5,axios的二次封装
未完待继...
