展开
拓展 关闭
邮箱 邮箱
图床 图床
笔记 笔记
ProcessOn ProcessOn
原型图 原型图
CodePen CodePen
服务器 服务器
coding coding
fastmock fastmock
Docker Hub Docker Hub
Travis Cl Travis Cl
码工具 码工具
在线工具 在线工具
蛙蛙工具 蛙蛙工具
PDF24 Tools PDF24 Tools
校招 校招
BOSS直聘 BOSS直聘
猎聘 猎聘
职友集 职友集
天眼查 天眼查
百度 百度
知乎 知乎
简书 简书
抖音 抖音
今日头条 今日头条
统计分析 统计分析
思维导图 思维导图
日历热力图 日历热力图
关系图 关系图
矩形树图 旭日图
订阅号推广码
GitHub
视频
公告栏 关闭

axios入门(一)

  • 简介
axios是前端Ajax请求库
在浏览器中发送Ajax请求到远程服务器，在nodejs中发送http请求到服务
支持promise
使用方式：npm或yarn安装、引入在线cnd
 
npm install axios
yarn add axios
https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
  • 案例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button onclick="testGet()">GET请求</button>
        <button onclick="testPost()">POST请求</button>
        <button onclick="testPut()">PUT请求</button>
        <button onclick="testDelete()">DELETE请求</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script>
        // 发送get请求方式1
        function testGet() {
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
            }).then(Response => {
                console.log(Response)
            })
        }
 
        // 发送一个post请求
        function testPost() { // 添加数据
            axios({
                method: 'post',
                url: 'http://localhost:3000/posts',
                data: {
                    title: "ssm",
                    author: "zs"
                }
            }).then(response => {
                console.log(response)
            })
        }
 
        // 发送一个put请求
        function testPut() { // 更新数据
            axios({
                method: 'put',
                url: 'http://localhost:3000/posts/2',
                data: {
                    title: "springboot",
                    author: "ls"
                }
            }).then(response => {
                console.log(response)
            })
        }
 
        // 发送一个del请求
        function testDelete() { // 删除数据
            axios({
                method: 'delete',
                url: 'http://localhost:3000/posts/2'
            }).then(response => {
                console.log(response)
            })
        }
 
        // 发送get请求方式2
        function testGet1() {
            axios.request({
                method: 'get',
                url: 'http://localhost:3000/posts'
            }).then(response => {
                console.log(response)
            })
        }
    </script>
</body>
</html>
  • 案例2
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script>
    function testGet() {
      axios.get('http://localhost:3000/posts') // 返回一个数组，数组里有两个对象
      // axios.get('http://localhost:3000/posts/1') // 返回一个对象
      // axios.get('http://localhost:3000/posts?id=1') // 返回一个数组，数组里有一个对象
      .then(response => {
        console.log('/posts get', response.data)
      })
    }
 
    function testPost() { // 添加数据
      axios.post('http://localhost:3000/posts', {"title": "json-server3", "author": "typicode" })
      .then(response => {
        console.log('/posts put', response.data)
      })
    }
 
    function testPut() { // 更新数据
      axios.put('http://localhost:3000/posts/3', {"title": "json-server_put", "author": "typicode" })
      .then(response => {
        console.log('/posts post', response.data)
      })
    }
 
    function testDelete() { // 删除数据
      axios.delete('http://localhost:3000/posts/3')
      .then(response => {
        console.log('/posts delete', response.data)
      })
    }
  </script>
</body>
</html>
  • 案例3
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script>
    // 默认配置
    axios.defaults.method = "GET";
    axios.defaults.baseURL = 'http://localhost:3000';
    axios.defaults.params ={id:1};
    axios.defaults.timeout = 3000;
    function testGet() {
      axios({
          url: '/posts'
      }).then(Response => {
          console.log(Response)
      })
    }
  </script>
</body>
</html>
  • 案例4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button onclick="testGet()">GET请求</button>
        <button onclick="testPost()">POST请求</button>
        <button onclick="testPut()">PUT请求</button>
        <button onclick="testDelete()">DELETE请求</button>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
      <script>
        function testGet() {
            
          // 创建一个axios实例，使用时直接执行该实例的回调函数
          const duanzi = axios.create({
              baseURL: 'http://localhost:3000',
              timeout: 2000
          })
 
          //创建多个实例
          const duanzi2 = axios.create({
              baseURL: 'http://192.168.0.102:8848',
              timeout: 2000
          })
 
          // 执行回调
          duanzi({
              url: '/posts',
          }).then(Response => {
              console.log(Response)
          })
 
        }
      </script>
</body>
</html>
posted @   DogLeftover  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  axios请求工具类
·  axios入门(三): 取消请求
·  Axios简介
·  axios中文文档|axios中文网
·  axios
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
AI IDE Trae