promise+axios

最新推荐文章于 2024-05-03 11:08:18 发布

VIP文章龍赢

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量626

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/weixin_52580155/article/details/121799382

版权

接口调用方式

promise

初次搭建

npm init -y
npm install [email protected]
npm install cors

调用后端接口

//app.js表

const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());

app.get("/list", (req, res) => {
   
  res.send("展示数据列表信息");
});
app.get("/add", (req, res) => {
   
  res.send("添加列表内容");
});
app.get("/del", (req, res) => {
   
  res.send("删除列表内容");
});
app.listen("3000", () => {
   
  console.log("服务启动了 http://127.0.0.1:3000");
});

通过ctrl+`启动node.js 在当中输入nodemon app.js。

前端请求接口

新建一个01.html文件，如果通过ajax接口请求后端的话会形成回调地狱.

一层嵌一层无限循环

<body>
    <script src="jquery-3.6.0 .js"></script>
    <script>
      // 获取列表信息
      $.ajax({
     
        url: "http:127.0.0.1:3000/list",
        type: "get",
        data: {
     },
        success: function(res) {
     
          console.log(res);
          // 实现添加功能
          $.ajax({
     
            url: "http:127.0.0.1:3000/add",
            type: "get",
            data: {
     },
            success: function(res) {
     
              console.log(res);
              // 实现删除功能
              $.ajax({
     
                url: "http:127.0.0.1:3000/del",
                type: "get",
                data: {
     },
                success: function(res) {
     
                  console.log(res);
                }
              });
            }
          });
        }
      });
    </script>
  </body>

promise基本用法

如果异步处理函数中运行成功会自动调用resolve函数，如果运行失败会自动回调raject函数。
不管正确还是错误的吃力结果都会在then方法中捕获到。

var p=new Promise(function(resolve,reject){
   
resolve();//成功时回调
reject();//失败时回调
})
p.then{
   
function(res){
   
   console.log(resolve);
},
function(res){
   
 console.log(reject)
}
}。then(成功data=>{
   }) .catch(失败err=>{
   }).finally(一半一半)

用promise封装ajax代码

不会形成回调地狱，避免了一直回调的出现

<body>
    <script src="jquery-3.6.0 .js"></script>
    <script>
      function queryData(url) {
     
        var p = new Promise(function(resolve, reject) {
     
          // 处理异步逻辑时候调用resolve和reject函数
          $.ajax({
     
            url: url,
            type: "get",
            success: function(res) {
     
              resolve(res);
            },
            error: function(err) {
     
              reject(err);
            }
          });
        });
        return p;
      }
      queryData("http://127.0.0.1:3000/list")
        .then(function(data) {
     
          console.log(data);
          return queryData("http://127.0.0.1:3000/add");
        })
        .then(function(data) {
     
          console.log(data);
          return data; //如果返回值是普通的数据
        })
        .then(function(data) {
     
          console.log(data); //那么在这个then函数中会自动获取上面返回的内容
        });
    </script>
  </body>

promis常用API

(1)promise实例常用方法

then 是捕获上面运行正确的结果
catch是捕获上面运行失败的结果
finally是捕获不管运行成功还是失败都会执行的结果

<script>
      function queryData() {
        return new Promise(function(resolve, reject) {
          // 用setTimeout模拟一下异步逻辑
          setTimeout(function() {
            // resolve("成功了数据");
            reject("失败了数据");
          }, 1000);
        });
      }
      queryData()
        .then(function(data) {
          console.log(data);
        })
        .catch(function(data) {
          console.log(data);
        })
        .finally(function() {
          console.log("我都会执行");
        });

（2）promise对象常用方法

promise.all()处理多个异步并发任务。所有的任务都执行完毕才能获取结果Promise.race()处理多个异步并发任务，只要有一个任务完成就能获取结果。

//后端代码的延迟
const express = require("express");
const app = express();
const cors = require("cors");
app.use(cors());

app.get("/list", (req, res) =>

最低0.47元/天解锁文章

龍赢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
promise+axios

对axios的详细介绍
复制链接

扫一扫