axios核心内容（三）使用相关

最新推荐文章于 2024-08-07 16:55:16 发布
最新推荐文章于 2024-08-07 16:55:16 发布
阅读量102 收藏
点赞数
文章标签： 前端 javascript ajax 笔记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53989829/article/details/130606276
版权

axios理解和使用

1. axios是什么

（1）前端最流行的ajax请求库（轻量级）

（2）react/vue官方都推荐使用axios发ajax请求

（3）文档：https://github.com/axios/axios

2. axios特点

（1）基于promise的异步ajax请求库 （执行完请求后返回的是promise对象）

（2）浏览器端/node端都可以使用

（3）支持请求/响应拦截器 （拦截器是统一对响应和请求做处理的函数）

（4）支持请求取消

（5）请求/响应数据转换

（6）批量发送多个请求

3. axios常用语法

（1）axios(config)： 通用/最本质的发任意类型请求的方式

（2）axios(url[, config])： 可以只指定url发get请求

（3）axios.request(config)： 等同于axios(config)

（4）axios.get(url[, config])： 发get请求

（5）axios.delete(url[, config])： 发delete请求

（6）axios.post(url[, data, config])： 发post请求

（7）axios.put(url[, data, config])： 发put请求

（8）axios.default.xxx： 请求的默认全局配置

（9）axios.interceptors.request.use()： 添加请求拦截器

（10）axios.interceptors.response.use()： 添加响应拦截器

（11）axios.create([config])： 创建一个新的axios（它没有下面的功能）

（12）axios.Cancel()： 用于创建取消请求的错误对象

（13）axios.CancelToken()： 用于创建取消请求的token对象 (cancelToken在axios@0.22.0后弃用了)

（14）axios.isCanel()： 是否是一个取消请求的错误

（15）axios.all(promise)： 用于批量执行多个异步请求

（16）axios.spread()： 用来指定接收所有成功数据的回调函数的方法

示例代码如下👇

<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.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    // 指定默认配置路径
    axios.defaults.baseURL = 'http://localhost:3000'

    // GET请求：从服务器端获取数据
    function testGet () {
      axios({
        url: '/posts',
        method: 'GET',
        params: {
          id: 1
        }
      }).then(
        response => {
          console.log('/posts get', response.data)
        })
    }
    // POST请求：服务器端保存数据
    function testPost () {
      axios({
        url: '/posts',
        method: 'POST',
        data: {
          "title": "json-server!!!",
          "author": "typicode!!!"
        }
      }).then(
        response => {
          console.log('/posts post', response.data)
        })
    }

    // PUT请求：服务器端更新数据
    function testPut () {
      axios({
        url: '/posts/1',
        method: 'PUT',
        data: {
          "title": "json-server~~~",
          "author": "typicode~~~"
        }
      }).then(
        response => {
          console.log('/posts put', response.data)
        })
    }

    // DELETE请求：服务器端删除数据
    function testDelete () {
      axios({
        url: '/posts/2',
        method: 'DELETE'
      }).then(
        response => {
          console.log('/posts delete', response.data)
        })
    }
  </script>
</body>

在这里插入图片描述
如果运行失败，在终端输入如下命令再刷新查看是否请求成功

json-server --watch db.json

4. 难点语法的理解和使用

（1）axios.create(config)

  • 根据指定配置创建一个新的axios，也就是每个新的axios都有自己的配置
  • 新的axios只是没有取消请求和批量发请求的方法，其它所有语法都是一致的
  • 设计该语法是为了处理项目中有部分接口需要的配置与另一部分接口需要的配置不一样；通过创建2个新axios，每个都有自己特有的配置，分别应用到不同要求的接口请求中即可解决
<body>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    axios.defaults.baseURL = 'http://localhost:3000'
    // 使用axios发请求
    axios({
      url: '/posts' // 请求3000
    })
    const instance = axios.create({
      baseURL: 'http://localhost:4000'
    })
    instance.get('/xxx')
  </script>
</body>

在这里插入图片描述

（2）拦截器函数/ajax请求/请求

<body>
    <script>
    	// 添加请求拦截器(回调函数)——后添加先执行
        // 第一种形式
        axios.interceptors.request.use(
        	config => {
                console.log('request interceptor1 onResolved()')
                return config; // 如果不设置返回config，会报错cancelToken，控制台提示undefined
            },
            error => {
                console.log('request interceptor1 onRejected()')
                return Promise.reject(error);
            }
        )
        // 第二种形式
        axios.interceptors.request.use(
          function (config) {
            console.log('request interceptor2 onResolved()')
            return config;
          },
          function (error) {
			console.log('request interceptor2 onRejected()')
            return Promise.reject(error);
          }
        );
        
        // 添加响应拦截器
        // 第一种形式
        axios.interceptors.response.use(
        	response => {
                console.log('response interceptor1 onResolved()')
                return response // 如果不设置返回response，会报错data，控制台提示undefined
            },
            error => {
                console.log('response interceptor1 onRejected()')
                return Promise.reject(error);
            }
        )
        // 第二种形式
        axios.interceptors.response.use(
          function (response) {
            console.log('response interceptor2 onResolved()')
            return response;
          },
          function (error) {
			console.log('response interceptor2 onRejected()')
            return Promise.reject(error);
          }
        );
        
        axios.get('http://localhost:/posts')
        	.then(response => {
            console.log('data', response.data)
        })
        	.catch(error => {
            console.log('error', error.message)
        })
    </script>
</body>

该流程是通过promise串联起来的，请求拦截器传递的是config，响应拦截器传递的是response👆

在这里插入图片描述

（3）取消请求

先创建server.js文件，文件代码如下👇

// server.js
const express = require('express')
const cors = require('cors')

const app = express()

// 使用cors,允许跨域
app.use(cors())
// 能解析urlencode格式的post请求体参数
app.use(express.urlencoded())
// 能解析json格式的请求体参数
app.use(express.json())

app.get('/products1', (req, res) => { // 注册的第一个路由
    setTimeout(() => {
        res.send({
            {id: 1, name: 'product1.1'},
         	{id: 2, name: 'product1.2'},
            {id: 3, name: 'product1.3'},
        })
    }, 1000 + Math.random()*2000);
})

app.get('/products2', (req, res) => { // 注册的第二个路由
    setTimeout(() => {
        res.send({
            {id: 1, name: 'product2.1'},
         	{id: 2, name: 'product2.2'},
            {id: 3, name: 'product2.3'},
        })
    }, 1000 + Math.random()*2000);
})

app.listen(4000, () => {
    console.log('server app start on port 4000')
})

在终端运行如下命令👇

node server.js

再创建一个新的html文件👇

<body>
    <button onclick="getProducts1">获取商品列表1</button>
    <button onclick="getProducts1">获取商品列表1</button>
    <button onclick="cancelReq">取消请求</button>
    
    <script>
        let cancel // 用于保存取消请求的函数
    	function getProducts1() {
            axios({
                url: 'http://localhost:4000/products1',
                cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
                    // 保存取消函数， 用于之后可能取消当前请求
                    cancel = c
                })
            }).then(
            	response => {
                    cancel = null
                    console.log('请求1成功', response.data)
                },
                error => {
                    cancel = null
                    console.log('请求1失败', error.message, error)
                })
        }
        
        function getProducts2() {
            axios({
                url: 'http://localhost:4000/products2'
            }).then(
            	response => {
                    cancel = null
                    console.log('请求2成功', response.data)
                },
                error => {
                    cancel = null
                    console.log('请求2失败', error.message, error)
                })
        }
        
        function cancelReq() {
            // 执行取消请求的函数
            if (typeof cancel === 'function') {
                cancel('强制取消请求')
            } else {
                console.log('没有可取消的请求')
            }
        }
    </script>
</body>

对取消请求的功能再进行优化，实现点击新的请求时取消前面的请求👇

<body>
  <button onclick="getProducts1">获取商品列表1</button>
  <button onclick="getProducts2">获取商品列表2</button>
  <button onclick="cancelReq">取消请求</button>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    let cancel // 用于保存取消请求的函数
    function getProducts1 () {
      // 在准备发请求前，取消未完成的请求
      if (typeof cancel === 'function') {
        cancel('取消请求')
      }

      axios({
        url: 'http://localhost:4000/products1',
        cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
          // 保存取消函数， 用于之后可能取消当前请求
          cancel = c
        })
      }).then(
        response => {
          cancel = null
          console.log('请求1成功', response.data)
        },
        error => {
          if (axios.isCancel(error)) {
            console.log('请求1取消的错误', error.message)
          } else {
            cancel = null
            console.log('请求1失败', error.message)
          }
        })
    }
    function getProducts2 () {
      // 在准备发请求前，取消未完成的请求
      if (typeof cancel === 'function') {
        cancel('取消请求')
      }

      axios({
        url: 'http://localhost:4000/products2',
        cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
          // 保存取消函数， 用于之后可能取消当前请求
          cancel = c
        })
      }).then(
        response => {
          cancel = null
          console.log('请求2成功', response.data)
        },
        error => {
          if (axios.isCancel(error)) {
            console.log('请求2取消的错误', error.message)
          } else { // 请求出错了
            cancel = null
            console.log('请求2失败', error.message)
          }
        })
    }

    function cancelReq () {
      // 执行取消请求的函数
      if (typeof cancel === 'function') {
        cancel('强制取消请求')
      } else {
        console.log('没有可取消的请求')
      }
    }
  </script>
</body>

代码重复高👆

通过设置拦截器，降低代码重复👇

<body>
  <button onclick="getProducts1">获取商品列表1</button>
  <button onclick="getProducts2">获取商品列表2</button>
  <button onclick="cancelReq">取消请求</button>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    // 添加请求拦截器
    axios.interceptors.request.use((config) => {
      // 在准备发请求前，取消未完成的请求
      if (typeof cancel === 'function') {
        cancel('取消请求')
      }
      // 添加一个cancelToken的配置
      config.cancelToken = new axios.CancelToken((c) => { // c是用于取消当前请求的函数
        // 保存取消函数， 用于之后可能取消当前请求
        cancel = c
      })
    })
    
    // 添加响应拦截器
    axios.interceptors.response.use(
      response => {
        cancel = null
        return response
      },
      error => {
        if (axios.isCancel(error)) { // 取消请求的错误
          console.log('请求取消的错误', error.message) // 做相应处理
          // 中断promise链接
          return new Promise(() => { })
        } else { // 请求出错了
          cancel = null
          // 将错误向下传递
          return Promise.reject(error)
        }
      }
    )
    
    let cancel // 用于保存取消请求的函数
    function getProducts1 () {
      axios({
        url: 'http://localhost:4000/products1'
      }).then(
        response => {
          console.log('请求1成功', response.data)
        },
        error => { // 只用处理请求失败的情况，取消请求的错误的不用
          console.log('请求1失败', error.message)
        }
      )
    }
    
    function getProducts2 () {
      axios({
        url: 'http://localhost:4000/products2'
      }).then(
        response => {
          console.log('请求2成功', response.data)
        },
        error => {
          console.log('请求2失败', error.message)
        }
      )
    }

    function cancelReq () {
      // 执行取消请求的函数
      if (typeof cancel === 'function') {
        cancel('强制取消请求')
      } else {
        console.log('没有可取消的请求')
      }
    }
  </script>
</body>
刀月一人捕快
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios发送表单数据_如何使用Axios发送urlencode数据
cuk0051的博客
08-28 2715
axios发送表单数据I had this problem: an API I had to call from a Node.js app was only accepting data using the urlencoded format. 我遇到了这个问题：我必须从Node.js应用程序调用的API仅接受使用urlencoded格式的数据。 I had to figure out t...
axios学习笔记
weixin_45842954的博客
03-20 445
什么是axios 1.基本promise的异步ajax请求库 2.浏览器端/node端都可以使用 3.支持请求／响应拦截器 4.支持请求取消 5.请求/响应数据转换 6.批量发送多个请求 1.使用axios发送ajax请求 1.需要先下载axios文件 或者添加在线地址 发送get请求 不携带参数 //获取所有人的信息 get请求 不携带参数 btn1.onclick = ()=>{ //完整版 axios({
axios 中断请求
小菜张的博客
05-30 2461
axios 中断请求
axios 取消请求:CancelToken
Allen的博客
12-01 9449
axios 取消请求:CancelToken
在axios中，实现applicatioon/x-www-form-urlencode请求方式
dududu777的博客
04-15 3692
application/x-www-form-urlencode方式是Jquery的Ajax默认的请求方式，使用此方式的优点在于浏览器都支持，在请求发送的过程中，会对请求带有的数据进行序列化处理，如：key0=value0&key=value1的键值对形式发送到后端服务器。 但是axios中默认的请求方式是application/json。 方法一：如果项目需要改动的api较少，可以采...
axios使用 cancel token 取消请求，报错Uncaught (in promise)，错误信息为canceled
ysml_mj的博客
07-19 3631
在使用取消axios请求时报错Uncaught(inpromise)，错误信息为canceled
JavaScript 中如何取消请求
cxz
07-27 3709
众所周知，JavaScript实现异步请求就靠浏览器提供的两个API——XMLHttpRequest和Fetch。我们平常用的较多的是Promise请求库axios，它基于XMLHttpRequest。
axios使用
zincredible's blog
03-24 128
详细方式参考 https://www.npmjs.com/package/axios cnd方式引入 (https://www.bootcdn.cn/axios/) <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> 更多例子https://gitee.com/...
cdn使用axios请求数据
菜鸟老五
01-07 9750
1引入cdn环境使用axios 第一步引入cdn地址 1>指定版本{下载地址---https://www.bootcdn.cn/axios/} <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script type=...
vue打包 使用UglifyJsPlugin减少体积，以及使用cdn、路由懒加载减少加载时间
qazxbjp2010的博客
04-02 4072
直接上代码了 vue.config.js const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { publicPath: './', //文件名hash filenameHashing: false, //生成source map productionSourceMap...
WEB渗透Web突破篇-SSRF
qq_59468567的博客
08-03 930
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 329
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 580
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 486
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
文章相关接口
qq_74474809的博客
08-03 264
跟着黑马程序员学习SpringBoot3+Vue3
【Web】TFCCTF 2024 部分题解
uuzeray的博客
08-04 691
但是因为strtok代码本身存在错误，当传入的string末尾为:时，会传入none进token，继而让internal server error，从而重启服务，这样就可以将事先写入app/templates下的模板文件注册。这时候再审计代码，可以发现当/login路由查表成功，会调strtok去分割数据，再写入User返回。提示打SSRF，但限制死了前缀要是http://google.com/修改后，再以admin/123:登录，此时服务会报错，刷新即可重启服务。多了一个/，便不能用@绕过。
小程序支付（前端）
weixin_43993121的博客
08-05 267
【代码】小程序支付（前端）
vuex知识
qq_16570607的博客
08-04 374
将getMoviesRankingInDouban的action用promise包装一下, 在此次请求结束后, 根据此次请求返回的电影的id, 根据id再次请求电影的信息。数据请求,在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。例子：在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。状态更改,在mutation中,将查询的结果(传入的参数), 赋值给state中声明的变量。
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
最新发布
a_靖的博客
08-07 103
vue实现放大缩小，拖动盒子完整代码付效果图
前端Web-JavaScript(下)
Yu2uki的博客
08-03 1434
补全一下js,忘记了好回来看
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值