axios基本了解
前言
axios 在请求中广泛应用 今天 我们一起来学习一下axios
引入axios
安装
npm install axios使用bower
bower install axios使用cdn
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
基本使用
<body> <div> <button>发送get请求</button> <button>发送post请求</button> <button>发送put请求</button> <button>发送delete请求</button> </div> <script> // 获取按钮 const btns = document.querySelectorAll('button') // 第一个按钮绑定事件 btns[0].onclick = () => { // 发送AJAX请求 axios({ // 请求类型 method: 'GET', // URL url: 'http://localhost:3000/posts/1', }).then(response => { console.log(response) }) } // 第二个按钮添加新的文章 btns[1].onclick = () => { // 发送AJAX请求 axios({ // 请求类型 method: 'POST', // URL url: 'http://localhost:3000/posts', // 设置请求体 data: { title: "今天小雨不断", author: "vike" } }).then(response => { console.log(response) }) } // 第三个按钮 更新数据 btns[2].onclick = () => { // 发送AJAX请求 axios({ // 请求类型 method: 'PUT', // URL url: 'http://localhost:3000/posts/2', // 设置请求体 data: { title: "今天小雨不断", author: "vike123" } }).then(response => { console.log(response) }) } // 第四个按钮 删除数据 btns[3].onclick = () => { // 发送AJAX请求 axios({ // 请求类型 method: 'DELETE', // URL url: 'http://localhost:3000/posts/2', // 设置请求体 }).then(response => { console.log(response) }) } </script> </body> 复制代码其他使用
// 发送 GET 请求 btns[0].onclick = () => { axios.request({ // 请求类型 method: 'GET', // url地址 url: 'http://localhost:3000/posts/1' }).then(response => { console.log(response) }) } // 发送post请求 btns[1].onclick = () => { axios.post( // 请求地址 'http://localhost:3000/comments', // 请求内容 { "body": "vike", "postId": 2 } ).then(response => { console.log(response) }) } 复制代码axios默认配置
// 默认配置 axios.defaults.method = 'GET' // 设置默认的请求类型为GET axios.defaults.baseURL = 'http://localhost:3000' //设置基础URL axios.defaults.params = {id:2} //url额外参数 axios.defaults.timeout = 3000 // 超时时间设置
作者：vike123
链接：https://juejin.cn/post/7020597731034939406