vue学习--网络请求

最新推荐文章于 2023-08-26 17:28:17 发布

qq_41735391

最新推荐文章于 2023-08-26 17:28:17 发布

阅读量321

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41735391/article/details/109912436

版权

本文详细探讨了在Vue.js项目中进行网络请求的方法，包括Promise的基本运用，Fetch API的实践，以及广泛使用的axios库的集成与应用。

摘要由CSDN通过智能技术生成

vue学习--网络请求

知识结构：

在这里插入图片描述

Promise的使用：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Loading...</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div>
    1.使用Promise进行网络的访问</br>
    promise是什么：promise是一种异步编程的解决方案，从语法上讲，promise是一个对象，可以异步的获取消息。</br>
    a.实例化 Promise对象，构造函数中传递函数，该函数中用于处理异步任务</br>
    b.resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果</br>
    <script type="text/javascript">
        //proimise的简单使用
        var p = new Promise(function (resolve, reject) {
    
            var flag = false;
            if (flag == true) {
    
                resolve("helloworld");
            } else {
    
                reject("sonmethingerror");
            }
        });
        p.then(function (data) {
    
            //这里输出成功的数据helloworld
            console.log("作用域1的数据", data);
        }, function (info) {
    
            //这里输出失败的数据sonmethingerror
            console.log("作用域1的数据", info)
        })
    </script>
</div>

</br>
</br>
<div>
    2.基于promise的ajax的使用
    <script type="text/javascript">
        function req(url) {
    
            return new Promise((resolve, reject) => {
    
                var request = new XMLHttpRequest();
                request.onreadystatechange = function () {
    
                    if (request.readyState != 4) {
    
                        return;
                    }
                    if (request.readyState == 4 && request.status == 200) {
    
                        return resolve(request.responseText);
                    } else {
    
                        return reject({
    
                            "code": 500,
                            "msg": "error"
                        });
                    }
                }
                request.open("get", url);
                request.send(null);
            });
        }

        var p2 = new req("http://127.0.0.1/pro1");
        p2.then((data) => {
    
            console.log(data);
        }, (info) => {
    
            console.log(info);
        })
        //promise的qingq
        var url = "http://127.0.0.1/time";
        req(url).then((data) => {
    
            console.log(data);
        })
        req(url).then((data) => {
    
            console.log(data);
        })
        req(url).then((data) => {
    
            console.log(data);
        })

    </script>
</div>
</br>
</br>
<div>
    3.promise的常用的api 一</br>
    p.then()得到异步任务的正确结果</br>
    p.catch()获取异常信息</br>
    p.finally()成功与否都会执行(尚且不是正式标准)</br>
    (resolve, reject)二者只能存其一，两者同时存在resolve生效
    <script type="text/javascript">
        var p3 = () => {
    
            return new Promise(((resolve, reject) => {
    
                //resolve("传递成功的信息");
                reject</

最低0.47元/天解锁文章

qq_41735391

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue学习--网络请求

vue学习--网络请求知识结构：Promise的使用：Fetch的使用axios的使用知识结构：Promise的使用：<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>Loading...</title></head><body><script
复制链接

扫一扫

专栏目录