fetch、axios

何乐

2023-12-01

一、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

1.简介

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

特性

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

2.基本语法

npm install axios

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

示例代码：

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

3.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>

fetch、axios

一、fetch

二、axios

get和delete请求

相关阅读

相关文章

相关问答