axios异步请求导致没有数据 axios是异步

转载

gulaotou 2023-06-25 20:40:59

文章标签 axios({异步返回延迟 ios 跨域请求数据 文章分类 iOS 移动开发

1 axios

概述：

axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据

axios(config)

axios.get(url, [config])

axios.post(url, [data])

发送数据config常用参数：

{
    url: '请求的服务器',
    method: '请求方式', // 默认是 get
    // GET请求参数
    params: {
        参数名: 参数值
    },
    // POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
    data: {
        参数名: 参数值
    },
    // 响应数据格式,默认json
    responseType: 'json'
}

响应数据常用参数：

{
    data: {},        //真正的响应数据(响应体)
    status: 200,    //响应状态码
    statusText: 'OK',     //响应状态描述
    headers: {},    //响应头
    config: {}        //其他配置信息
}

2.Get请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送GET请求axios.get("请求路径",{ config });
       axios.get("请求路径",{
            //get请求参数
            params: {
                name:"zhangsan",
                age:23
            },
            //响应数据格式为"json"
            responseType: 'json'
        }).then(res => {
            //打印响应数据
            console.log(res);
            //把响应数据赋值给Vue中的user属性
            app.user = res.data;
        }).catch(err => {
            //打印响应数据(错误信息)
            console.log(err);
        });
    }
});

3.Post请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送POST请求axios.post("请求路径",{ 参数 });
        axios.post("请求路径",{
                name:"zhangsan",
                age:23
            }).then(res => {
                console.log(res);
                app.user = res.data;
            }).catch(err => {
                console.log(err);
            });
    }
});