axios的基本使用

本文的后台数据通过json-server来模拟,对json-server感兴趣可以去看typicode的github源网站

axios的基本使用

axios的作者jasonsaayman可以看到axios的几种引入方式

复制代码
Using npm:
$ npm install axios
​
Using bower:
$ bower install axios
​
Using yarn:
$ yarn add axios
​
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
​
Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
​

这里以script方式引入来进行介绍

使用axios()方法来发送请求
复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>发送GET请求</button>
    <button>发送POST请求</button>
    <button>发送PUT请求</button>
    <button>发送DELETE请求</button>
    <script>
        //接收数据
        const btns = document.querySelectorAll('button')//获取元素
        btns[0].onclick = function(){
            axios({
                //请求类型
                method: 'GET',//发送GET请求
                //URL
                url: 'http://localhost:3000/posts' //地址是json-server的地址
            }).then(response=>{//axios返回结果是promise,用then方法来接收
                console.log(response)//输出返回结果
            })
        }
        
        //发送数据
        btns[1].onclick = function(){
            axios({
                //请求类型
                method:'POST',//发送POST请求
                //URL
                url: 'http://localhost:3000/posts',//根据json-server的规则来编写地址
                //设置请求体
                data:{//要发送的数据
                    title:'今天天气不错',
                    author:'张三'
                }//此时在自己的json-server中创建的json文件中就会看到发送到的数据
            })then(response=>{
                console.log(response)//输出返回结果
            })
        }
        
        //更新数据
        btns[2].onclick = function(){
            axios({
                //请求类型
                method:'PUT',//发送PUT请求
                //URL
                url: 'http://localhost:3000/posts/3',// /3表示要修改id为3的内容
                //设置请求体
                data:{//要发送的数据
                    title:'今天天气不错',
                    author:'李四'
                }//此时在自己的json-server中创建的json文件中就会看到发送到的数据
            }).then(response=>{
                console.log(response)//输出返回结果
            })
        }
        
        //删除数据
        btns[3].onclick = function(){
            axios({
                //请求类型
                method:'DELETE',//发送DELETE请求
                //URL
                url: 'http://localhost:3000/posts/3',// /3表示要删除id为3的内容
            }).then(response=>{
                console.log(response)//输出返回结果
            })
        }
    </script>
</body>
使用axios.request()来发送请求
复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>发送GET请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        btns[0].onclick = function(){
            axios.request({
                method:'GET',//发送GET请求
                url: 'http://localhost:3000/posts'
            }).then(response =>{
                console.log(response)
            })
        }
    </script>
</body>
使用axios.post()来发送请求
复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>发送POST请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        btns[0].onclick = function(){
            //axios.post(url[, data[, config]])
            //post第一个参数为url,第二个为请求体内容,第三个为配置 二三都是可选的
            axios.post('http://localhost:3000/comments',{//向comments部分发送数据
                "body": "some comment",
                "postId": "2"
            }).then(response=>{//发送成功的回调
                console.log(response)
            })
        }
    </script>
</body>

多余的axios方法基本都与上方相同,就不再过多演示了

axios默认配置

可以设置一些默认配置来减少代码的冗余

复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>发送GET请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        axios.defaults.method = 'GET' //设置默认的请求类型为 GET
        axios.defaults.baseURL = 'http://localhost:3000' //设置基础URL
        btns[0].onclick = function(){
            axios.request({
                url: '/posts'
            }).then(response =>{
                console.log(response)//返回成功内容
            })
        }
    </script>
</body>
axios创建实例对象来发送请求

当想对两个域名不相同的服务器发送请求就可以使用创建实例对象来发送

复制代码
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button>发送服务器1GET请求</button>
    <button>发送服务器2GET请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        const server1 = axios.create({
            baseURL: 'https://api.bilibili.com', //演示这里的api就随便写了
            timeout:2000//设置2秒超时终止
        })
        const server2 = axios.create({
            baseURL: 'https://sentry.music.163.com', //演示这里的api就随便写了
            timeout:2000//设置2秒超时终止
        })
        btns[0].onclick = function(){
            server1({
                url:'/x/web-interface/zone?jsonp=jsonp'//发送请求
            })
        }
        btns[1].onclick = function(){
            server2({
                url:'/wapm/api/sdk/collect'//发送请求
            })
        }
    </script>
</body>
axios拦截器
复制代码
<!--结果:输出:  请求拦截器 成功   响应拦截器 成功   发送请求成功-->
<body>
    <button>发送GET请求</button>
<script>
    const btns = document.querySelectorAll('button')
    btns[0].onclick = function(){
        //发送请求
            axios({
                method: 'GET',
                url:'http://localhost:3000/posts'
            }).then(response=>{
                console.log('发送请求成功')
            }).catch(reason=>{
                console.log('失败回调')//请求拦截器失败会输出
            })
        }
// 添加请求拦截器
axios.interceptors.request.use(function (config) {//use相当于promise的then方法,前面返回成功值,后面返回失败值
    console.log('请求拦截器 成功')
    return config;//这里要是抛出异常或promise返回值为失败则响应拦截器为失败
  }, function (error) {
    console.log('请求拦截器 失败')
    return Promise.reject(error);
  });
​
// 添加响应拦截器
axios.interceptors.response.use(function (response) {//只要请求码是2xx就是会接收到响应
    console.log('响应拦截器 成功')
    return response;
  }, function (error) {
    console.log('响应拦截器 失败')
    return Promise.reject(error);
  });
</script>
</body>
相关推荐
quitv13 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco11 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh11 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
软件开发技术深度爱好者11 小时前
验证码介绍及生成与验证(HTML + JavaScript实现)
javascript