VUE基础 笔记肆章 前后端交互

最新推荐文章于 2023-07-26 14:16:23 发布
最新推荐文章于 2023-07-26 14:16:23 发布
阅读量482 收藏
点赞数
分类专栏： # HTML&CSS&JavaScript&Vue 文章标签： vue.js
博客围绕前后端交互展开，介绍了接口调用方式、URL地址格式，包括传统和Restful形式。详细讲解了Promise用法，如异步调用、基本用法、常用API等。还阐述了多种接口调用的用法，涵盖基本特性、参数传递、响应结果等内容，最后给出基于接口的案例分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 前后端交互模式

1.1 接口调用方式

  • 原生 Ajax
  • 基于 jQuery 的 Ajax
  • fetch
  • axios

1.2 URL地址格式

1.2.1 传统形式的URL

1. 格式：schema://host:port/path?query#fragment
schema：协议。例如http、https、ftp等。
host：域名或者IP地址。
port：端口，http默认端口80，可以省略。
path：路径，例如/abc/a/b/c。
query：查询参数，例如 uname=lisi&age=12。
fragment：锚点（哈希Hash），用于定位页面的某个位置。

2. 符合规则的URL
http://www.itcast.cn
http://www.itcast.cn/java/web
http://www.itcast.cn/java/web?flag=1
http://www.itcast.cn/java/web?flag=1#function

1.2.2 Restful形式的URL
  1. HTTP请求方式：GET（查询）、POST（添加）、PUT（修改）、DELETE（删除）。
  2. 符合规则的URL地址
    　　http://www.hello.com/books GET
    　　http://www.hello.com/books POST
    　　http://www.hello.com/books/123 PUT
    　　http://www.hello.com/books/123 DELETE

2. Promise 用法

2.1 异步调用

  • 异步效果分析：定时任务、Ajax、事件函数。
  • 多次异步调用的依赖分析
    • 多次异步调用的结果顺序不确定。
    • 异步调用结果如果存在依赖，则需要嵌套。

2.2 Promise 概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

使用Promise主要有以下好处：可以避免多层异步调用嵌套问题（回调地狱）；Promise对象提供了简洁的API，使得控制异步操作更加容易。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

<body>
  <div>前后端交互</div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    /*
      前后端交互-异步编程与Promise概述
    */
    // var ret = '---';
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     ret = data;
    //     console.log(ret)
    //   }
    // });
    // console.log(ret)

    // ----------------------------
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data1',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data2',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // -----------------------------------
    // 回调地狱
    $.ajax({
      url: 'http://localhost:3000/data',
      success: function(data) {
        console.log(data)
        $.ajax({
          url: 'http://localhost:3000/data1',
          success: function(data) {
            console.log(data)
            $.ajax({
              url: 'http://localhost:3000/data2',
              success: function(data) {
                console.log(data)
              }
            });
          }
        });
      }
    });    
  </script>
</body>

2.3 Promise 基本用法

  1. 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务。
  2. resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果，即接收并处理异步处理返回的结果。
   var p = new Promise(function(resolve, reject){
       // 成功时调用 resolve()
       // 失败时调用 reject()
   });
   p.then(function(ret){
       // 从resolve得到正常结果
   }, function(ret){
       // 从reject得到错误信息
   });

<body>
  
  <script type="text/javascript">
    /*
      Promise基本使用
    */
    // console.log(typeof Promise)
    // console.dir(Promise);

    var p = new Promise(function(resolve, reject){
      // 这里用于实现异步任务
      setTimeout(function(){
        var flag = false;
        if(flag) {
          // 正常情况
          resolve('hello');
        }else{
          // 异常情况
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      console.log(data);
    },function(info){
      console.log(info);
    });
  </script>
</body>

2.4 基于Promise处理Ajax请求

2.4.1 处理原生Ajax
function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        // 下面的函数不止触发一次
        // 只要状态发生了变化就会被触发
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        // 准备发送前的一些参数
        xhr.open('get', url);
        xhr.send(null);
      });
    }

  <body>
    <script type="text/javascript">
      /*
      基于Promise发送Ajax请求
    */
      function queryData(url) {
        var p = new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 处理正常的情况
              resolve(xhr.responseText);
            } else {
              // 处理异常情况
              reject("服务器错误");
            }
          };
          xhr.open("get", url);
          xhr.send(null);
        });
        return p;
      }
      queryData('http://localhost:3000/data')
        .then(function(data){
          console.log(data);
        },function(info){
          console.log(info)
        });
    </script>
  </body>
2.4.2 发送多次Ajax请求
      // ============================
      // 发送多个ajax请求并且保证顺序
      queryData()
        .then(function (data) {
          console.log(data);
          return queryData();
        })
        .then(function (data) {
          console.log(data);
          return queryData();
        })
        .then(function (data) {
          console.log(data);
          return queryData();
        });

通过then方法把多个任务变成线性关系，这样就可以保证它们的执行顺序。then方法的参数中的函数return的是一个新的Promise实例对象，下一个then方法的调用者就是上一个then方法的参数中函数返回的Promise对象。then方法的参数中函数的参数data用于接收上一个异步任务的处理结果。

  <body>
    <script type="text/javascript">
      /*
      基于Promise发送Ajax请求
    */
      function queryData(url) {
        var p = new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 处理正常的情况
              resolve(xhr.responseText);
            } else {
              // 处理异常情况
              reject("服务器错误");
            }
          };
          xhr.open("get", url);
          xhr.send(null);
        });
        return p;
      }
      // ============================
      // 发送多个ajax请求并且保证顺序
      queryData("http://localhost:3000/data")
        .then(function (data) {
          console.log(data);
          return queryData("http://localhost:3000/data1");
        })
        .then(function (data) {
          // data 为后端返回的处理结果
          console.log(data);
          return queryData("http://localhost:3000/data2");
        })
        .then(function (data) {
          console.log(data);
        });
    </script>
  </body>

在这里插入图片描述

2.5 then参数中的函数返回值

2.5.1 返回Promise实例对象

返回的该实例对象会调用下一个then。

2.5.2 返回普通值

返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。
在该场景中，返回普通之后会产生一个默认的Promise对象，该对象用于调用下一个then方法。

  <body>
    <script type="text/javascript">
      /*
      then参数中的函数返回值
    */
      function queryData(url) {
        return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 处理正常的情况
              resolve(xhr.responseText);
            } else {
              // 处理异常情况
              reject("服务器错误");
            }
          };
          xhr.open("get", url);
          xhr.send(null);
        });
      }
      queryData("http://localhost:3000/data")
        .then(function (data) {
          return queryData("http://localhost:3000/data1");
        })
        .then(function (data) {
          return new Promise(function (resolve, reject) {
            setTimeout(function () {
              resolve(123);
            }, 1000);
          });
        })
        .then(function (data) {
          return "hello";
        })
        .then(function (data) {
          console.log(data);
        });
    </script>
  </body>

2.6 Promise常用的API

除了then方法外，Promise还提供了其他的API。

2.6.1 实例方法
  1. p.then()得到异步任务的正确结果。
  2. p.catch()获取异常信息。
  3. p.finally()成功与否都会执行（尚且不是正是标准）。
  <body>
    <script type="text/javascript">
      /*
      Promise常用API-实例方法
    */
      // console.dir(Promise);
      function foo() {
        return new Promise(function (resolve, reject) {
          setTimeout(function () {
            // resolve(123);
            reject("error");
          }, 100);
        });
      }
      // foo()
      //   .then(function(data){
      //     console.log(data)
      //   })
      //   .catch(function(data){
      //     console.log(data)
      //   })
      //   .finally(function(){
      //     console.log('finished')
      //   });

      // --------------------------
      // 两种写法是等效的
      foo()
        .then(
          function (data) {
            console.log(data);
          },
          function (data) {
            console.log(data);
          }
        )
        .finally(function () {
          console.log("finished");
        });
    </script>
  </body>

在这里插入图片描述

2.6.2 对象方法

Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果。

Promise.race()并发处理多个异步任务，只要有一个任务完成就能到结果。

    Promise.all([p1, p2, p3]).then((result) => {
        console.log(result);
    });
    Promise.race([p1, p2, p3]).then((result) => {
        console.log(result);
    });

  <body>
    <script type="text/javascript">
      /*
      Promise常用API-对象方法
    */
      // console.dir(Promise)
      function queryData(url) {
        return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 处理正常的情况
              resolve(xhr.responseText);
            } else {
              // 处理异常情况
              reject("服务器错误");
            }
          };
          xhr.open("get", url);
          xhr.send(null);
        });
      }

      var p1 = queryData("http://localhost:3000/a1");
      var p2 = queryData("http://localhost:3000/a2");
      var p3 = queryData("http://localhost:3000/a3");
      // Promise.all([p1,p2,p3]).then(function(result){
      //   console.log(result)
      // })
      Promise.race([p1, p2, p3]).then(function (result) {
        console.log(result);
      });
    </script>
  </body>

3. 接口调用-fetch用法

3.1 fetch概述

3.1.1 基本特性
  • 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版。
  • 基于Promise实现。
3.1.2 语法结构
    fetch(url).then(fn2)
              .then(fn3)
              ...
              .catch(fn)

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

3.2 fetch的基本用法

语法格式

    fetch('/abc').then(data => {
        return data.text();
    }).then(ret => {
        // 注意这里得到的才是最终的数据
        console.log(ret);
    });

实例代码

  <body>
    <script type="text/javascript">
      /*
      Fetch API 基本用法
    */
      fetch("http://localhost:3000/fdata")
        .then(function (data) {
          // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
          return data.text();
        })
        .then(function (data) {
          console.log(data);
        });
    </script>
  </body>

3.3 fetch请求参数

3.3.1 常用配置选项
  • method(String)：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）。
  • body(String)：HTTP的请求参数。
  • headers(Object)：HTTP的请求头，默认为 {}。
    fetch('/abc', {
        method: 'get'
    }).then(data => {
        return data.text();
    }).then(ret => {
        // 注意这里得到的才是最终的数据
        console.log(ret);
    });
3.3.2 GET请求方式的参数传递

基于传统URL形式的传参方式

      // GET参数传递-传统URL
      fetch('http://localhost:3000/books?id=123', {
           method: 'get'
      }).then(data => {
           return data.text();
         }).then(ret => {
           // 注意这里得到的才是最终的数据
           console.log(ret);
         });

基于Resful形式的传参方式

      // GET参数传递-restful形式的URL
       fetch('http://localhost:3000/books/456', {
         method: 'get'
       }).then(data => {
           return data.text();
         }).then(ret => {
           // 注意这里得到的才是最终的数据
           console.log(ret);
         });
3.3.3 DELETE请求方式的参数传递
      // DELETE请求方式参数传递
       fetch('http://localhost:3000/books/789', {
         method: 'delete'
       }).then(function(data){
           return data.text();
         }).then(function(data){
           console.log(data)
         });

总结：GET与DELETE方式都是通过 / 形式传参的。

3.3.4 POST请求方式的参数传递

方式一：基于"Content-Type": "application/x-www-form-urlencoded"

      // POST请求传参
      fetch("http://localhost:3000/books", {
        method: "post",
        body: "uname=lisi&pwd=123",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then(function (data) {
          return data.text();
        }).then(function (data) {
          console.log(data);
        });

后台代码

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
// 处理静态资源
app.use(express.static('public'));
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});

// 路由
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd);
});

// 启动监听
app.listen(3000, () => {
  console.log('running...');
});

方式二：基于"Content-Type": "json"

      // POST请求传参
      fetch('http://localhost:3000/books', {
        method: 'post',
        body: JSON.stringify({
          uname: '张三',
          pwd: '456'
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(function(data){
          return data.text();
        }).then(function(data){
          console.log(data)
        });

后台代码与方式一的基本没有变化。后台代码之所以能够支持这两种方式的前台请求是由于app.use(bodyParser.json());的bodyParser中间件提供的支持。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
// 处理静态资源
app.use(express.static('public'));
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});

// 路由
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd);
});

// 启动监听
app.listen(3000, () => {
  console.log('running...');
});
3.3.5 PUT请求方式的参数传递

前台代码

     // PUT请求传参
      fetch("http://localhost:3000/books/123", {
        method: "put",
        body: JSON.stringify({
          uname: "张三",
          pwd: "789",
        }),
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then(function (data) {
          return data.text();
        })
        .then(function (data) {
          console.log(data);
        });

后台代码

app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd);
});

总结：对于POST和PUT方式的参数传递，需要通过body来传递实际的请求参数，同时还需要设置headers。headers支持json格式的数据和传统表单类型的数据，这两种数据的传递需要后台的支撑。

3.4 fetch响应结果

响应数据格式
  • text()：将返回结果处理成字符串类型。
  • json()：返回结果和JSON.parse(responseText)一样。

前台代码

  <script type="text/javascript">
    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();
      return data.text();
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })
  </script>

后台处理

app.get('/json', (req, res) => {
  // json为express提供的API
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
});

4. 接口调用-axios用法

4.1 axios的基本特性

axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端。HTTP客户端可以调用HTTP格式的后台接口，它具有以下特征：

  • 支持浏览器和node.js。
  • 支持Promise。
  • 能拦截请求和响应。
  • 自动转换JSON数据。

4.2 axios的基本用法

在使用之前需要引入对应的JS库文件。
在这里插入图片描述将下载的压缩包解压，讲\axios-master\axios-master\dist目录下的axios.js复制到项目的根目录下，之后在使用axios的时候，引入该文件即可。

前台代码

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      axios.get("http://localhost:3000/adata").then(function (ret) {
        // 注意data属性是固定的用法，用于获取后台的实际数据
        // console.log(ret.data)
        console.log(ret);
      });
    </script>
  </body>

后台代码

app.get('/adata', (req, res) => {
  res.send('Hello axios!');
});

4.3 axios的常用API

  • get：查询数据
  • post：添加数据
  • put：修改数据
  • delete：删除数据

4.4 axios的参数传递

4.4.1 GET传递参数

1. 通过传统URL传递参数

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios请求参数传递
      */
      // axios get请求传参
       axios.get('http://localhost:3000/axios?id=123').then(function(ret){
         console.log(ret.data)
       });
    </script>
  </body>

后台代码

app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id);
});

2. 通过URL（Resful）传递参数

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios请求参数传递
      */
      // axios get请求传参
      axios.get("http://localhost:3000/axios/123").then(function (ret) {
        console.log(ret.data);
      });
    </script>
  </body>

后台代码

app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id);
});

3. 通过params选项传递参数

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios请求参数传递
      */
      // axios get请求传参
      axios
        .get("http://localhost:3000/axios", {
          params: {
            id: 789,
          },
        })
        .then(function (ret) {
          console.log(ret.data);
        });
    </script>
  </body>

后台代码

app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id);
});
4.4.2 DELETE传递参数

DELETE参数传递方式与GET类似，此处只类举第三种。

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios请求参数传递
      */
      // axios delete 请求传参
      axios
        .delete("http://localhost:3000/axios", {
          params: {
            id: 111,
          },
        })
        .then(function (ret) {
          console.log(ret.data);
        });
    </script>
  </body>

后台代码

app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id);
});
4.4.3 POST传递参数

1. 通过选项传递参数（ 默认传递的是json格式的数据 ）。

      // axios post 请求传参
      axios
        .post("http://localhost:3000/axios", {
          uname: "lisi",
          pwd: 123,
        })
        .then(function (ret) {
          console.log(ret.data);
        });

后台代码

app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd);
});

2. 通过URLSearchParams传递参数（ application/x-www-form-urlencoded ）。

      // axios post 请求传参
      var params = new URLSearchParams();
      params.append("uname", "zhangsan");
      params.append("pwd", "111");
      axios.post("http://localhost:3000/axios", params).then(function (ret) {
        console.log(ret.data);
      });

后台代码

app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd);
});
4.4.4 PUT传递参数

参数传递方式与POST类似，两种方法都支持。

      // axios put 请求传参
      axios
        .put("http://localhost:3000/axios/123", {
          uname: "lisi",
          pwd: 123,
        })
        .then(function (ret) {
          console.log(ret.data);
        });

后台代码

app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd);
});
4.4.5 参数传递总结

对于axios发送POST和PUT请求来说，它们都支持两个格式的参数传递，一种是ｊｓｏｎ格式的数据，另一种是传统表单行式的数据。具体用哪种取决于后台。
1. get和 delete请求传递参数

  • 通过传统的url 以 ? 的形式传递参数
  • restful 形式传递参数
  • 通过params 形式传递参数

2. post 和 put 请求传递参数

  • 通过选项传递参数
  • 通过 URLSearchParams 传递参数

4.5 axios的响应结果

响应结果的主要属性
  • data：实际响应回来的数据。
  • headers：响应头信息。
  • status：响应状态码。
  • statusText：响应状态信息。

4.6 axios的全局配置

  • 超时时间：axios.defaults.timeout = 3000;
  • 默认地址：axios.defaults.baseURL = "http://localhost:3000/app";
  • 设置请求头：axios.defaults.headers["mytoken"] = "aqwerwqwerqwer2ewrwe23eresdf23";
  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios 响应结果与全局配置
      */
      // axios.get('http://localhost:3000/axios-json').then(function(ret){
      //   console.log(ret.data.uname)
      // })

      // 配置请求的基准URL地址
      axios.defaults.baseURL = "http://localhost:3000/";
      // 配置请求头信息
      axios.defaults.headers["mytoken"] = "hello";
      axios.get("axios-json").then(function (ret) {
        console.log(ret.data.uname);
      });
    </script>
  </body>

后台代码

app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 12
  });
});

4.7 axios拦截器

4.7.1 请求拦截器

在请求发出之前设置一些信息
在这里插入图片描述

      // 添加一个请求拦截器
      axios.interceptors.request.use(
        function (config) {
          // 在请求发出之前进行一些信息设置
          console.log(config.url);
          config.headers.mytoken = "nihao";
          return config;
        },
        function (err) {
          // 处理相应的错误信息
          console.log(err);
        }
      );
4.7.2 相应拦截器

在获取数据之前对数据做一些加工处理。
在这里插入图片描述

      // 添加一个响应拦截器
      axios.interceptors.response.use(
        function (res) {
          // 在这里对返回的数据进行处理
          // console.log(res);
          var data = res.data;
          return data;
        },
        function (err) {
          // 处理相应的错误信息
          console.log(err);
        }
      );

  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      axios拦截器
    */
      axios.interceptors.request.use(
        function (config) {
          console.log(config.url);
          config.headers.mytoken = "nihao";
          return config;
        },
        function (err) {
          console.log(err);
        }
      );

      axios.interceptors.response.use(
        function (res) {
          // console.log(res)
          var data = res.data;
          return data;
        },
        function (err) {
          console.log(err);
        }
      );
      axios.get("http://localhost:3000/adata").then(function (data) {
        console.log(data);
      });
    </script>
  </body>

5. 接口调用async/await用法

5.1 async/await的基本用法

  • async/await是ES7引入的新语法，可以更加方便地进行异步操作。
  • async关键字用于函数上（async函数的返回值是Promise实例对象）。
  • await关键字用于async函数当中（await可以得到异步的结果）。
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
    */
    axios.defaults.baseURL = 'http:localhost:3000';
    // axios.get('adata').then(function(ret){
    //   console.log(ret.data)
    // })

    // async function queryData() {
    //   var ret = await axios.get('adata');
    //   // console.log(ret.data)
    //   return ret.data;
    // }

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })
  </script>

5.2 async/await处理多个异步请求

5.2.1 多个异步请求的场景
  <body>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      async/await处理多个异步任务
    */
      axios.defaults.baseURL = "http://localhost:3000";

      async function queryData() {
        var info = await axios.get("async1");
        var ret = await axios.get("async2?info=" + info.data);
        return ret.data;
      }

      queryData().then(function (data) {
        console.log(data);
      });
    </script>
  </body>

后台代码

app.get('/async1', (req, res) => {
  res.send('hello1');
});
app.get('/async2', (req, res) => {
  if (req.query.info == 'hello') {
    res.send('world');
  } else {
    res.send('error');
  }
});

本章用到的后台代码汇总

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
// 处理静态资源
app.use(express.static('public'));
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
app.get('/async1', (req, res) => {
  res.send('hello1');
});
app.get('/async2', (req, res) => {
  if (req.query.info == 'hello') {
    res.send('world');
  } else {
    res.send('error');
  }
});

app.get('/adata', (req, res) => {
  res.send('Hello axios!');
});
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id);
});
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id);
});
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id);
});
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd);
});
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd);
});

app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 12
  });
});


app.get('/fdata', (req, res) => {
  res.send('Hello Fetch!');
});
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id);
});
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id);
});
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id);
});
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd);
});
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd);
});

app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
});

app.get('/a1', (req, res) => {
  setTimeout(function () {
    res.send('Hello TOM!');
  }, 1000);
});
app.get('/a2', (req, res) => {
  setTimeout(function () {
    res.send('Hello JERRY!');
  }, 2000);
});
app.get('/a3', (req, res) => {
  setTimeout(function () {
    res.send('Hello SPIKE!');
  }, 3000);
});

// 路由
app.get('/data', (req, res) => {
  res.send('Hello World!');
});
app.get('/data1', (req, res) => {
  setTimeout(function () {
    res.send('Hello TOM!');
  }, 1000);
});
app.get('/data2', (req, res) => {
  res.send('Hello JERRY!');
});

// 启动监听
app.listen(3000, () => {
  console.log('running...');
});

6. 基于接口的案例

6.1 案例分析

在这里插入图片描述

vue 后端返回二进制流文件，前端如何实现下载？
Start2019
12-17 8035
1. 下载时需要传token值应该怎么去做？ 2. 后台返回二进制流文件，前端怎么去实现下载？
【vue实现界面方法的返回值传给下一个界面】
weixin_54073482的博客
11-23 826
我要实现的是登录后获取权限列表，跳转到权限的功能页面，在页面进行权限的循环展示 登录界面 export default { name: "uplogin", data() { return{ title: "账号密码登录", user:{}, users:[] } }, methods:{ async onSubmit(user){
Vue通过axios（封装ajax）调用接口并返回进行数据
anglra的博客
07-26 1935
在vscode或其他主流浏览器的控制台通过"npm install axios -g"去全局安装axios。
vue在method中的一个方法中获取后台的数据，在另外一个方法中调用
骨子里的偏爱
04-06 788
在methond中一个方法调用另外一个方法中的数据时，要么采用异步（async await），要么是采用回调callback(),最后是我这种方法，允许另外一个方法获取到这个方法中返回的数据。1.在method中，一个方法调用另外一个方法时，数据在方法二中出现。
Vue | 25.网络应用 - axios基本使用
xyx-Eshang的博客
09-29 315
文章目录1.概述2.axios：功能强大的网络请求库2.1.引入2.2.如何使用3.实践：只使用axios不使用Vue3.1.代码3.2.效果 1.概述 axios必须先引入才可以使用 使用axios.get或axios.post即可发送对应的请求 then方法中的回调函数会在请求成功或失败时触发 通过回调函数的形参可以获取响应内容或错误信息 2.axios：功能强大的网络请求库 axios官方文档 axios实际上是ajax的封装库，相比原生的ajax，发送请求的方式更加简便。 2.1.引入 在&lt
VUE进阶 笔记贰章 前端工程化
12-30
Vue进阶笔记的第二章主要聚焦于前端工程化，这是一个旨在提高开发效率、优化代码质量和维护性的主题。前端工程化的概念涵盖了许多方面，包括项目构建工具、模块打包、自动化测试、持续集成和部署等。下面将详细探讨...
SpringBoot+Vue读书笔记功能管理系统（前后端分离包含数据库脚本文件）.zip
06-02
综上所述，这个系统提供了全面的读书笔记管理体验，涵盖了从用户管理到笔记记录的整个流程，同时利用了SpringBoot和Vue的优势，实现了高效的前后端协作。如果你想要学习如何使用这两个框架来开发Web应用，或者需要一...
基于SpringBoot+vue的前后端分离权限管理系统，界面美观，代码简洁易读
06-01
《基于SpringBoot+Vue的前后端分离权限管理系统详解》 在现代互联网开发中，前后端分离已经成为主流架构，其中SpringBoot和Vue.js是两个非常重要的技术栈。本系统充分利用了这两者的优点，构建了一个功能完备、界面...
Vue学习笔记(五): 使用axios进行前后端交互
"这篇VUE学习笔记主要介绍了如何在Vue项目中引入并使用axios库进行前后端数据交互。Axios是一个基于Promise的HTTP库，适用于浏览器和node.js环境。在Vue中，通常使用axios来处理HTTP请求，如GET和POST。笔记首先指导...
Vue基础笔记111111111
最新发布
08-11
Vue.js 是一款流行的前端JavaScript框架，用于构建...以上是Vue.js的基础知识点，包括其核心的MVVM模式、数据绑定、事件处理、条件渲染、循环遍历以及优化技术。掌握这些知识能帮助开发者有效地构建和维护Vue.js应用。
axios基本使用及跨域问题详解
AnnGreen的博客
07-31 1万+
前端请求自然也发展迅速，从原生的XHR到jqueryajax，再到现在的axios和fetch。//www.axios-js.com/zh-cn/）是Vue推荐的http库，这个还是要了解一点的。
使用axios进行数据传输
m0_59246072的博客
03-29 2118
axios的简单使用
怎么用axios返回的数据动态显示页面
qq_45334976的博客
03-27 6480
vue3，通过axios返回数据渲染页面
Axios请求数据的使用方法浅析
渣渣砖
02-28 2854
请求数据的第三方插件Axios,可以支持vue,node ,react axios:基于Promise的HTTP客户端，用于浏览器和node.js 使用步骤 1：安装axios npm i axios --save / cnpm 2: 哪里用就在那里引入 import Axios from 'axios' / const axios = require('axios'); 3...
vue2和vue3使用ref获取元素
热门推荐
qq_44473483的博客
01-10 1万+
vue2和vue3通过red获取元素
Promise.then函数返回值类型与参数传递
weixin_41728198的博客
12-08 1万+
JavaScript语言没有类型，我更喜欢使用TypeScript，它本质上也是运行JavaScript的代码。 在TypeScript中使用Promise的时候，Promise.then()函数的返回值类型有时需要考虑。 我们都知道，Promise.then和Promise.catch这两个函数都是可以链式调用的，说明他们返回的类型也是一个Promise类型的对象。每一个then或catch...
vue学习经验之axios中数据无法取出问题
weixin_44000275的博客
05-15 1406
前言 昨天在写axios取出后台数据时，不能给组件定义的data中的数据传值，开始的时候以为是不是生命周期钩子用错了，后来发现没错，又以为是不是promise异步的问题，发现也不是，最后查询资料发现是一个很小的写法问题，现在分享一下，供大家参考： 1.相关值与代码 template：{{chose}} data:function(){ return{ chose:'这是测试1'} } 钩子： b...
解决vue里面“将一个方法的返回值作为另一个方法的参数”的问题
z19950712的博客
12-28 6980
1、首先，我们写两个方法，同样写在method里面， query(idcard) { let _this = this; $.ajax({ type: "post", url: 'http://localhost:8081/GFTJKZZPT/interfaces/recordController/allResult.do', data: { //当前用户的身份证 idCard: '362227
js promise 异步取值和赋值问题
吴灵辉的博客
12-11 9784
bug背景 var name = ''; let res = this.$apiW.findTask( { 'numbers' : numbers} ).then((res) => { console.log(res , pagesJson ); // uni.showToast({ // title: res.data ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值