promise用法

已于 2022-02-15 14:55:41 修改
阅读量323 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery javascript vue.js
于 2022-02-08 16:15:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HUSBANDL/article/details/122825870

接口调用方式

我们都知道一般我们前台获取的数据都是从后台获取的，我们一般采用下面几种方式调取后台接口数据：

  1. 原生js的AJAX
  2. jquery封装的AJAX(偏向于操作DOM,不适用于vue)
  3. fetch
  4. axios

promise

创建后端接口

我们先用node创建本地服务,代码如下：

  • npm init -y
  • npm install express@4.17.1
  • npm install cors
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");
});

前端请求接口

<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基本用法

<script>
      var p = new Promise(function(resolve, reject) {
        resolve(); //成功时候调用的函数
        reject(); //失败时候调用的函数
      });
      p.then(
        function(res) {
          从resolve处理函数得到的结果;
        },
        function(res) {
          从reject处理函数得到的结果;
        }
      );
    </script>

说明

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

promise常用API

promise实例常用方法：

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

promise对象常用方法：

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

fetch

fetch也是一种新的请求后台接口的方式，语法如下：

fetch(url)
    .then(fn1)
    .then(fn2)
    .catch(fn3)
    ....

代码示例：

<script>
      fetch("http://127.0.0.1:3000/list")
        .then(function(data) {
          return data.text();
        })
        .then(function(data) {
          console.log(data);
        });
    </script>

axios

简介：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 自动转换 JSON 数据

基本语法

npm install axios

axios.get('/list').then(res=>{
    res是后台响应的对象，res.data是获取后台返回的具体数据
)

axios基本API

axios中封装的有下面几个方法：

  1. get 查询
  2. post 添加
  3. delete 删除
  4. put 更新

get和delete请求

（1）问号传参

get和delete传参方式类似，我们以get请求为例演示：

比如前端发送数据如下：

 <script>
      axios.get("http://127.0.0.1:3000/list?id=1").then(function(res) {
        console.log(res.data);
      });
    </script>

后端app.js接受传参如下：

app.get("/list", (req, res) => {
  res.send("获取博客信息列表" + req.query.id);
});

（2）动态传参

前端代码如下：

<script>
      axios.get("http://127.0.0.1:3000/list/1").then(function(res) {
        console.log(res.data);
      });
    </script>

后端接口数据如下：

app.get("/list/:id", (req, res) => {
  res.send("获取博客信息列表" + req.params.id);
});

（3）params传参

前端传参如下：

<script>
      axios
        .get("http://127.0.0.1:3000/list", {
          params: {
            id: 1,
            name: "tom"
          }
        })
        .then(function(res) {
          console.log(res.data);
        });
    </script>

后端接收如下：

app.get("/list", (req, res) => {
  res.send("获取博客信息列表" + req.query.id + req.query.name);
});

post和put请求

前端传参：

<script>
      axios
        .post("http://127.0.0.1:3000/add", {
          username: "tom",
          pass: "111"
        })
        .then(function(res) {
          console.log(res.data);
        });
    </script>

后端接口获取数据（注意配置才能获取post请求的数据）

app.use(express.json());//后端配置获取post传递的json格式数据
app.post("/add", (req, res) => {
  res.send("实现添加功能" + req.body.username + req.body.pass);
});

或者前端传递参数如下：

<script>
      let params = new URLSearchParams();
      params.append("username", "tom"); //参数1是设置传递的变量名 参数2是传递的值
      params.append("pass", "111"); //参数1是设置传递的变量名 参数2是传递的值
      axios.post("http://127.0.0.1:3000/add", params).then(function(res) {
        console.log(res.data);
      });
    </script>

后端接口如下：

app.use(express.urlencoded({ extended: false }));//解析后传递格式是

app.post("/add", (req, res) => {
  res.send("实现添加功能" + req.body.username + req.body.pass);
});

put请求类似比如要id为2的这条信息更新为username为jim，age=20,所以前端的请求代码如下：

 <script>
      axios
        .put("http://127.0.0.1:3000/edite/2", {
          username: "jim",
          age: 20
        })
        .then(function(res) {
          console.log(res.data);
        });
    </script>

后端代码如下：

app.use(express.json());
app.put("/edite/:id", (req, res) => {
  res.send("实现更新功能" + req.body.username + req.body.age);
});

注意

我们上面的前端请求的接口地址每次都有一个前缀http://127.0.0.1:3000，为了更方便的进行代码管理，我们可以通过axios提供的一个方法设置访问的地址前缀：
比如上面的前端代码，我们如下操作会更加简洁

 <script>
      axios.defaults.baseURL = "http://127.0.0.1:3000/";
      axios
        .put("edite/2", {
          username: "jim",
          age: 20
        })
        .then(function(res) {
          console.log(res.data);
        });
    </script>

async和await

async和await是es7引入的新语法，更加方便异步编程的调用
async用在函数前面，async函数的返回值prommise的实例对象
await关键字用于async函数中，主要是获取异步代码执行的结果。

原代码示例如下：

<script>
      axios.defaults.baseURL = "http://127.0.0.1:3000/";
      axios.get("list").then(function(res) {
        console.log(res.data);
      });
</script>

用async和await改造如下：

      axios.defaults.baseURL = "http://127.0.0.1:3000/";
      async function queryData() {
        const res = await axios.get("list");
        console.log(res);
      }
      queryData();

HUSBANDL
关注
fetch、axios
sjs1766349405的博客
12-08 653
一、fetch fetch也是一种新的请求后台接口的方式，语法如下： fetch(url) .then(fn1) .then(fn2) .catch(fn3) .... 代码示例： <script> fetch("http://127.0.0.1:3000/list") .then(function(data) { return data.text(); }) .then(
关于promise
weixin_70152241的博客
09-15 252
浅谈Promise
利用Promise自定义一个GET请求的函数示例代码
12-11
写在最前面 近期 review 自己以前的代码的时候，看到 promise 的使用方法，用的比较模糊。含义不清，用法凌乱，这里重新温习一下基础知识。 前言 JavaScript 是单线程工作，但是浏览器是多线程的。为了更好的完成我们程序的任务。Promise 异步的操作就由此诞生了。 一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象。 怎么使用？ 语法 基本 new Promise( function(resolve, reject) {...} /* executor */ ); Promise 构造函数包含一个参数和一个带有 resolve（解析）和 rejec
3.Promise传参
最新发布
yujiabao702的博客
04-05 251
【代码】3.Promise传参。
Promise
qingemengyue的博客
08-28 628
回调函数真正的问题在于无法使用 return 和 throw 这些关键字。Promise 很好地解决了这一问题。 Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等同样方法。1.新建一个Promisevar p = new Promise(function(resolve, reject){ //异步操作 setT
Promise用法
01-08
promise是个构造函数对象，解决了回调问题，它有三种状态，pending(等待态)，fulfiled(成功态)，rejected(失败态)，常用到的方法则有 then，catch，all，race promise是用来解决两个问题的： 回调地狱，代码难以维护...
ES6中异步对象Promise用法详解
12-10
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考，具体如下： 回忆一下ES5中的怎么使用异步方法 // es5中的异步回调 let ajax = function(callback){ console.log('执行') // 执行 setTimeout(()...
AngularJS中的promise用法分析
10-19
在AngularJS的promise用法中，.then()方法可以接受三个参数：两个回调函数分别对应promise的解析（resolve）和拒绝（reject），还有一个回调函数用于通知（notify）状态的变化。.catch()方法用于捕获并处理在链式...
异步JavaScript编程中的Promise使用方法
01-01
异步？ 我在很多地方都看到过异步(Asynchronous)这个词，但在我还不是很理解这个概念的时候，却发现自己常常会被当做“已经很清楚”(*￣?￣)。 如果你也有类似的情况，没关系，搜索一下这个词，就可以得到大致的说明...
Promise详解
weixin_47996469的博客
06-22 994
promise是一个对象，从它可以获取异步操作的消息。有all、race、reject、resolve这几个方法，原型上有then、catch等方法。Promise的两个特点：状态的缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出错误，不会反应到外部。当处于pending状态时，无法得知目前进展到哪一阶段。Promise的优点Promise的缺点语法：let p = new Promise( (resolve,reject)=>{//resolv
promise
weixin_42679876的博客
08-02 459
promise整理
封装好的ajax传参---使用ES6的Promise
react打断点调试
07-02 1021
第一种：POST方式传参使用POST传参说明：使用post传参时，要用‘，’后面写参数，当使用ajax函数时，传参的方式是用对象的方式，如上第二种方式：GET传参GET传参的使用说明：使用get传参时，要用‘？’后面写参数，当使用ajax函数时，传参的方式是用字符串拼接的方式，如上...
js之异步编程四种方案(回调函数/promise/genarator/async)
Erya Programming learning
07-08 909
文章目录方法一、回调函数(回调地狱)方法二：promise2.1异步任务传参（单个）2.2异步任务传参（多个）2.3 错误处理2.4 Promiss对象三大状态: (学名) 我们现在需要多个异步任务必须顺序执行 异步函数：各自执行各自的，互不干扰，互相之间也不会等待。 方法一、回调函数(回调地狱) i. 前一项任务: function 前一项任务(购物车){ 异步任务 异步任务最后一句话之后 购物车() } ii. 调用前一项任务时: 前一项任务(function(){ 下一项任
Promise封装ajax的get请求接口
姚辉乾
10-26 2365
这个是封装好的ajax             // 封装一个get请求的方法             function getJSON(url) {                 return new Promise(function(resolve, reject) {                     var XHR = new XMLHttpRequest();        ...
封装一个promise的get请求
pigpigbond的博客
08-21 767
封装一个promise的get请求 function get(url) {//封装的方法 return new Promise(function (resole, reject) {//返回promise let xhr = new XMLHttpRequest();//创建XMLHttpResquest对象 xhr.onreadystatechange = function(){//监听xhr对象的5个状态 if(xhr.readyStat
Promise用法详解
m0_57491825的博客
09-05 531
第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它 这个函数到底怎么用；当我们需要的时候，给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象；当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数；当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数；但是每个人封装的函数都是不一样的 有的人喜欢把成功的实参函数写在前面、中间或者后面。
promise使用详解
taowuhua的博客
06-16 3296
号外号外：本篇文章主要使用了ES6箭头函数，如果不熟悉的同学建议看一看。嘻嘻 开篇之前先理清下面几个问题 Promise的构造函数参数可以传递什么类型？除了使用Promise构造函数进行链式调用外，Promise还有什么方式进行链式调用吗？ Promise.resolve（）的参数可以传递什么类型的数据？不同类型的数据产生怎样的结果？ Promise的构造函数中调用resolve()/reject()这样做的目的是什么？ Promise的then方法是做什么的？ 如何终止链式调用？（这个场景会在
Promise及其应用
m0_64656503的博客
04-05 1158
Promise及其应用，对Promise及其应用进行扩展学习和实践
Promise 常用用法
weixin_43833851的博客
05-15 292
Promise 的构造函数接收一个参数，参数也是一个函数，这个函数有两个入参，分别是resolve 和 reject, resolve 和 reject的参数类型可以任意，但是只支持一个参数，可以用数组或者json等完成多参数传递 特别注意：Promise 与主线程之间是异步的 先看下面这种完整的写法： 下面代码模拟了一个业务场景：当a ==10 时表示成功，非10表示失败，可以用a=10 和a=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值