axios异步还有超时吗 axios异步请求数据

1.1.1axios基础用法

官网地址：

axios中文网|axios API 中文文档 | axios

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据
• get和 delete请求传递参数

• 通过传统的url  以 ? 的形式传递参数
• restful 形式传递参数
• 通过params  形式传递参数

• post  和 put  请求传递参数

• 通过选项传递参数
• 通过 URLSearchParams  传递参数

1.1.2传参

1.发送get 请求

<div id="app">
        <button @click="send()">get请求传递参数</button>
    </div>

<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
     
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               send(id){
                //发送异步请求
                //
                var apiUrl=`http://localhost:4000/acdata/${id}`
                axios.get(apiUrl).then((result)=>{
                    console.log(result);
                })

               }

            }
        })
    </script>

app.js

//允许别人在客户端的地址栏中写参数，送给服务器（接口地址）
app.get('/acdata/:id',(req,res)=>{
    console.log(req.params);
    res.send('acdata--小余同学');

})

预览：

postman请求发送数据:

<div id="app">
        <button @click="send(123)">get请求传递参数</button>
    </div>

<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
     
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               send(id){
                //发送异步请求
                //
                var apiUrl=`http://localhost:4000/adata?id=${id}`
                axios.get(apiUrl,{
                    params:{
                        id:1,
                        uname:'xiaoyu'
                    }
                }).then((result)=>{

                    console.log(result);
                })

               }

            }
        })
    </script>

app.js:

app.get('/adata',(req,res)=>{
    res.send('adata--小余同学');
	console.log(req.query)

})

预览：

 

 

<div id="app">
        <button @click="send()">post请求传递参数</button>
    </div>

<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
     
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               send(id){
                //发送异步请求
                //
                var apiUrl=`http://localhost:4000/pdata`
                axios.post(apiUrl,{
                    uid:1,
                    uname:'xiaoyu'
                   
                }).then((result)=>{

                    console.log(result);
                })

               }

            }
        })
    </script>

app.js

app.post('/pdata',(req,res)=>{
    console.log(req.body);
    res.send('hx')
})

预览：

 

1.1.2axios 拦截器

• 请求拦截器

• 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 请求拦截器的作用是在请求发送前进行一些操作

• 响应拦截器

• 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
• 请求拦截
• 响应拦截器的作用是在接收到响应后进行一些操作

axios.interceptors.request.use(function(config) {
  console.log(config.url)
  // 任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'nihao';
  // 这里一定要return   否则配置不成功  
  return config;
}, function(err){
  // 对请求错误做点什么    
  console.log(err)
})

• 响应拦截

axios.interceptors.response.use(function(res) {
  // 在接收响应做些什么  
  var data = res.data;
  return data;
}, function(err){
  // 对响应错误做点什么  
  console.log(err)
})

1.2 async await

1.1.1基本用法

• async作为一个关键字放到函数前面

• 任何一个async函数都会隐式返回一个promise

• await关键字只能在使用async定义的函数中使用

•    await后面可以直接跟一个 Promise实例对象
•     await函数不能单独使用

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .grid{
            width: 800px;
            margin:20px auto 2px;
            border-collapse: collapse;
        }
        .grid th,.grid td{
            border:1px solid #000;
            padding:10px;
        }
        .title{
            text-align: center;
        }
    </style>

<div id="app">
        <h1 class="title">图书列表</h1>
        <table class="grid">
            <tr align="center">
                <td>
                    编号:<input type="text">
                    名称:<input type="text">
                    <button>提交</button>
                </td>
            </tr>
            <tr>
                <td>
                    图书总数：{{count}}
                </td>
            </tr>
        </table>
        <table class="grid">
            <thead >
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
                <tbody v-for="(item,index) in books" :key="index">
                    <tr>
                        <td>{{item.bid}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.addtime}}</td>
                        <td><button>删除</button></td>
                    </tr>
                </tbody>
           
        </table>
    </div>

<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>

    <script>
        //配置公共的请求头
        axios.defaults.baseURL = 'http://localhost:4000';
        // 配置 超时时间
        axios.defaults.timeout = 2500;
        // 配置公共的请求头
        // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        // 配置公共的 post 的 Content-Type
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.interceptors.response.use(function(res) {
            // 在接收响应做些什么  
            var data = res.data;
            return data;
            }, function(err){
            // 对响应错误做点什么  
            console.log(err)
            })
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   flag:false,
                   submitFlag:false,
                   id:'',
                   name:'',
                   books:[]
                }

            },
            computed:{

                count(){
                    return this.books.length
                }
            },
            mounted(){
                this.queryData()
            },
            methods:{
                queryData:async function(){
                    //发送异步请求
                    //  使用 async  来 让异步的代码  以同步的形式书写 
                    await axios.get('/list').then((result)=>{
                        console.log(result);
                        this.books=result;

                    })
                }
               

            }
        })
    </script>

打开小皮

打开Navicat

 

预览：