axios

ymktchic

发布于 2022-01-18 17:20:44

1.4K0

发布于 2022-01-18 17:20:44

文章被收录于专栏：ymktchicymktchic

axios

基本使用

增删改查，get查，post增，put改，delete查

<body>
    <button id="1">点我</button>
    <button id="2">点我2</button>
    <button id="3">点我3</button>
    <button id="5">点我5</button>
     <script>
         var btn = document.getElementById('1')
         var btn2 = document.getElementById('2')
         var btn3 = document.getElementById('3')
         var btn5 = document.getElementById('5')
         btn.onclick=function(){
            axios({
                method:'GET',
                url: 'http://localhost:3000/posts',
            }).then(response=>{
                console.log(response)
            });
         }
         btn2.onclick=function(){
            axios({
                method:'POST',
                url: 'http://localhost:3000/posts',
                data:{
                    title: "hello world",
                    author: "chenhao"
                }
            }).then(value=>{
                console.log(value)
            },reason=>{
                console.log(reason)
            });
         }
         btn3.onclick=function(){
            axios({
                method:'delete',
                url: 'http://localhost:3000/posts/3',
    
            }).then(value=>{
                console.log(value)
            },reason=>{
                console.log(reason)
            });
         }
         btn5.onclick=function(){
            axios({
                method:'PUT',
                url: 'http://localhost:3000/posts/2',
                data:{
                    title: "hello world",
                    author: "libai"
                }
            }).then(value=>{
                console.log(value)
            },reason=>{
                console.log(reason)
            });
         }
     </script>
</body>

默认配置

axios.defaults.method='POST'
   axios.defaults.baseURL='http://localhost:3000'

拦截器

 		//增加一个请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log("请求拦截器成功")
    return config;
  }, function (error) {
    // Do something with request error
        console.log("请求拦截器失败")
    return Promise.reject(error);
  });

//增加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
            console.log("响应拦截器成功")
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
                console.log("响应拦截器成功")
    // Do something with response error
    return Promise.reject(error);
  });
axios({
    method:'GET',
    url: 'http://localhost:3000/posts'
    
})

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除

axios