接口调用方式

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

原生js的AJAX
jquery封装的AJAX(偏向于操作DOM,不适用于vue)
fetch
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>

说明

如果异步处理函数中运行成功会自动调用resolve函数，如果运行失败会自动调用reject函数。
不管正确还是错误的处理结果都会在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 中。

特性

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

基本语法

npm install axios

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

axios基本API

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

get 查询
post 添加
delete 删除
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();