【Vue】Vue全家桶（五）前后端交互+接口调用方法(fetch、axios、async/await)

原创

已于 2024-12-16 10:47:43 修改 · 4k 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-05-26 21:37:42 首次发布

本文详细介绍了前后端交互的模式，包括前端调用后端接口的方式和URL地址格式。接着，深入探讨了Promise的用法，包括异步调用、解决回调地狱以及常用API。接着，讲解了fetch的使用，包括基本用法、请求参数和响应结果。然后，讨论了axios库的特点和用法，以及如何处理多个异步请求。最后，介绍了async和await的异步处理方式，以及如何通过后台接口重构图书管理案例。文章通过示例代码展示了各种交互和异步处理技术的应用。

文章目录

1. 前后端交互模式

前后端交互:前端页面通过工具调用后端接口,拿到数据库中的数据,然后在做前端页面的渲染。

什么是前端？什么是后端？什么是数据库?

在这里插入图片描述

1.1 前端调用后端接口的方式

原生ajax
基于jQuery的ajax
fetch
axios

1.2 URL地址格式

1.传统形式的URL

格式：schema://host:port/path？query#fragment
1. schema：协议。例如http，https，ftp等
2. host：域名或者IP地址
3. port：端口，http默认端口80，可以省略
4. @path：路径，例如/abc/a/b/c
5. query：查询参数，例如uname=lisi&age=120
6. fragment：锚点（哈希Hash），用于定位页面的某个位置
符合规则的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

2.Restful形式的URL
RESTful URL是通过清晰的结构、适当的HTTP方法、资源的层次关系和状态码来设计的，旨在使API更易于理解和使用。它强调使用名词来表示资源，而通过HTTP方法来定义对这些资源的操作。

HTTP请求方式

GET 查询
POST 添加
PUT 修改
DELETE 删除
符合规则的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 :ES6引入的异步编程的新解决方案,语法是一个构造函数 ,用来封装异步操作并可以获取其成功或失败的结果. resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

Promise 中的异步体现在then和catch中，所以写在 Promise 中的代码是被当做同步任务立即执行的。

//手写一个promise模板
var promise = new Promise((resolve,reject) => {
   
   
    if (操作成功) {
   
   
        resolve(value)
    } else {
   
   
        reject(error)
    }
})
promise.then(function (value) {
   
   
    // success
},function (error) {
   
   
    // failure
})

Promise对象有三种状态:初始化pending 成功fulfilled 失败rejected

Promise 就是一个对象，用来表示并传递异步操作的最终结果
Promise { <PromiseState>: PromiseResult} PromiseState:状态 PromiseResult:返回值
Promise 最主要的交互方式：将回调函数传入 then 方法来获得最终结果或出错原因
Promise 代码书写上的表现：以“链式调用”代替回调函数层层嵌套（回调地狱）p.then().then()

使用Promise主要有以下好处：

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

//02-Promise基本使用.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

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

</html>

2.3 基于Promise处理Ajax请求

1.Promise封装原生Ajax

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
    function queryData(url) {
   
   
		return new Promise( (resolve, reject) =>{
   
   
        //原生请求
        //1.创建Ajax对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open('get', url);
        //3.发送请求
        xhr.send()
        //4.绑定事件,处理响应结果
        xhr.onreadystatechange = function () {
   
   
          //判断状态
          if (xhr.readyState == 4) {
   
   
            //判断响应状态码200-299
            if (xhr.status >= 200 && xhr.status <= 299) {
   
   
              //成功
              resolve(xhr.response)
            } else {
   
   
              //失败
              reject(xhr.status)
            }
          }
        }
      })
    };
    queryData('http://localhost:3000/data')
      .then(function (value) {
   
   
        console.log(value);
      }).then(function (error) {
   
   
        console.log(error);
      })
  </script>
</body>

</html>

//index.js
//引入express框架
const express = require('express')
//创建网站服务器
const app = express()
//引入接收post请求参数第三方包 `body-parser`。
const bodyParser = require('body-parser')
// 处理静态资源
//app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求。
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
// 配置body-parser模块
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.