Promise、axios 个人学习心得

最新推荐文章于 2023-05-19 12:04:07 发布

肉乎乎的鸭

最新推荐文章于 2023-05-19 12:04:07 发布

阅读量756

点赞数

分类专栏：新手 vue 文章标签： axios promise vue

本文链接：https://blog.csdn.net/zcylxzyh/article/details/114526262

版权

本文介绍了Promise的基本概念和使用，包括Promise的创建、解决与拒绝、简写形式以及Promise.all方法。接着详细探讨了axios的安装、使用、并发请求处理、全局配置以及如何进行网络模块的封装，推荐了一种灵活的封装方式。最后，讨论了axios的拦截器在请求和响应处理中的应用，以提高代码的可维护性和统一性。

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

Promise、axios

前言

有的时候因为需要考虑路径的问题，因此我们可以给一些路径起一下别名：（extensions中有的在import的时候就不用加后缀了）
在这里插入图片描述

起别名之后使用import是可以直接用别名的

如果在html属性中src这里需要加上 ~ 符号才相当于使用了别名

1、Promise

1.1 什么是Promise

在这里插入图片描述

1.2 基本使用

new Promise的时候是相当于先保存了一些状态信息，保存之后执行我们传入的函数（要传递两个参数）
在执行传入的回调函数的时候会传入两个参数，resolve,reject本身又是函数
Promise分离了异步请求和处理数据的代码
成功的时候调用resolve
一旦调用resolve的时候它就会去调用then ,then(下一步)函数的里面也是一个函数,这个函数里是我需要处理的事情。
如果多次嵌套就可以return一个Promise继续进行操作
失败的时候调用reject
一旦调用reject的时候它就会去调用catch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    //参数：resolve,reject本身又是函数
    /* 
        成功的时候调用resolve
        一旦调用resolve的时候它就会去调用then ,
        then(下一步)函数的里面也是一个函数,这个函数里是我需要处理的事情
        如果多次嵌套就可以return一个Promise继续进行操作

        失败的时候调用reject
        一旦调用reject的时候它就会去调用catch ,
    */
    /*
        new Promise的时候是相当于先保存了一些状态信息，保存之后执行我们传入的函数（要传递两个参数）
        在执行传入的回调函数的时候会传入两个参数，resolve,reject本身又是函数
        Promise分离了异步请求和处理数据的代码
    */
    new Promise((resolve, reject) => {
    
        //第一次请求的代码
        setTimeout((data) => {
    
            resolve('bbb')
        }, 1000)
    }).then((data) => {
    
        //第一次请求拿到结果的处理代码
        console.log(data);
        return new Promise((resolve, reject) => {
    
            // 第二次请求的代码
            setTimeout(() => {
    
               // resolve()
               reject('aaa')
            }, 1000);
        })
    }).then(() => {
    
        //第二次请求拿到结果的处理代码
        console.log('hello');
    }).catch((err) => {
    
        //第二次请求