Axios

最新推荐文章于 2023-06-09 20:41:55 发布
最新推荐文章于 2023-06-09 20:41:55 发布
阅读量415 收藏
点赞数 1
分类专栏： axios 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54671516/article/details/127175283
版权

目录

1.axios的理解

2.axios的基本使用

3.axios的请求方式

4.axios的快捷请求方式

5.axios的全局配置

6.axios的实例

7.axios拦截器

 本篇学习axios的相关内容，那就分别从几个部分来看看吧

1.axios的理解

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。jQuery中也封装了ajax机制，但是仅适用于浏览器。

2.axios的基本使用

首先需要引入axios.

先了解一些axios的基本配置，如下，以下只是列出了一些常用的配置项，如果想要过呢更深入的学习可以去查阅一下axios的官方文档。

axios({
            // 请求路径
            url:"",
            // 请求方法
            method:'',
            //get携带参数
            params:{},
            // post携带参数
            data:{},
            // 请求头
            headers:{},
            // 表示请求超果过timeout没有响应就中断
            timeout:1000,
            // 后端返回的数据格式
            reponseType:'json'
        })

 如下，使用axios发送一个请求

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>
<body>
    <script>
        axios({
            // 请求路径,此处一个后台接口地址，，接口地址自行替换
            url:"http://xxx.xxx.xxx.xxx:8888/index/carousel/findAll",
        })


    </script>
</body>
</html>

结果如下

 我们在axios的配置项中并没有设置请求方法，但是我们查看网络可以看到是get方法，因此，如果没有设置method，请求默认使用的是get方法

3.axios的请求方式

这里先介绍最常用的请求，get请求和post请求

get请求和post请求都要分情况，一种是有参数，一种是没有参数，get请求的参数写在axios的配置项pramas中，post请求的参数写在axios的配置项data中，且post请求有两种数据格式，一种是JSON格式，一种是表单格式，需要手动转换，下面我们分别来看一下（我用的接口在这里打了一个马赛克，需要换成自己的接口）

上面代码发送的就是get没有参数的请求，这里就不重复了，

get有参请求

 

 post无参请求

效果如图

 post有参请求，发送数据格式是JSON

 

 

 完整代码：

<!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>axios </title>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
  <script>
  
    let token='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY'
    // axios的返回值是一个promise对象
    axios({
      url: 'http://xxx.xxx.xxx.xxx:8888/category/saveOrUpdate',
      method:'post',
      data:Qs.stringify({
        name:'text2022'
      }),
      headers: {
        'Content-Type': "application/x-www-form-urlencoded",
        'Authorization':token
      }
    }).then(res=>{
      console.log(res,'请求成功');
    }).catch(res=>{
      console.log(res,'请求失败');
    }).finally(res=>{
      console.log('最终执行');
    })
  </script>
</body>

</html>

 因为axios返回的是一个promise对象，所以可以调用promise的API

4.axios的快捷请求方式

<!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>axios </title>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
  <script>
    // axios 的快捷方法
    // get 无参
    // axios.get('http://XXX.XXX.XXX.XXX:8888/index/carousel/findAll').then(res => {
    //   console.log(res);
    // })
    // get 有参     axios.get(url,{config})
    // let url = 'http://http://XXX.XXX.XXX.XXX:8888/index/article/pageQuery'
    // axios.get(url, {
    //   params: {
    //     page: 1,
    //     pageSize: 10
    //   },
    //   headers: {
    //     'Auth': 123
    //   }
    // }).then(res => {
    //   console.log(res);
    // })

    
    // axios.delete(url, {
    //   params: {
    //     page: 1,
    //     pageSize: 10
    //   },
    //   headers: {
    //     'Auth': 123
    //   }
    // }).then(res => {
    //   console.log(res);
    // })
    // post 快捷方法
    // let url = 'http://XXX.XXX.XXX.XXX:8888/user/login'
    // let data= {
    //    username:'admin1',
    //    password:123321
    //   }
    // axios.post(url,data,{timeout:3000}).then(res => {
    //   console.log(res);
    // })
    // post 表单格式
    let url = 'http://XXX.XXX.XXX.XXX:8888/category/saveOrUpdate'
    let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY'

    let data = {
      name: '你好'
    }
    axios.post(url, Qs.stringify(data), {
      headers: {
        // 'Content-Type': "application/x-www-form-urlencoded",
        'Authorization': token
      }
    }).then(res => {
      console.log(res.data);
      // res 是axios封装的数据，res.data才是后端返回的数据
    })
  </script>
</body>

</html>

5.axios的全局配置

以及实例

<!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>axios </title>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
  <script>
    // 创建axios实例,可以把公共的方法写在实例的配置项里面
    // let instance= axios.create({
    //   baseURL:'http://xxx.xxx.xxx.xxx:8888',
    //   timeout:2000,
    //   headers:{ 
    //     'Auth':123456
    //   }
    // })
    // instance.post('/user/login',{
    //   username:'admin1',
    //   password:123321
    // }).then(res=>{
    //   console.log(res);
    // })

    // 全局配置axios的配置项
    axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx:8888';
    // axios.defaults.headers.common['Authorization'] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5NTA4NDAsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTIzNjQwLCJuYmYiOjE2NjQ5NTA4NDB9.QRy4riQml4Q0kL7hHejHrXqbMMiR8npgI_7b413_3mY';
    axios.post('/user/login', {
      username: 'admin1',
      password: 123321
    }).then(res => {
      console.log(res);
    })

  </script>
</body>

</html>

7.axios拦截器

axios给我们提供了两大类拦截器 一种是请求方向的拦截（成功请求，失败请求） 另一种是响应方向的（成功响应，失败响应）

拦截器的作用：用于我们在网络请求的时候在发起请求或者响应时对操作进行相应的处理

<!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>axios </title>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
</head>

<body>
  <script>
    // 判断是不是登录接口，如果不是登录接口要携带token拦截
    //    请求拦截器：对axios的所有请求进行拦截
    axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx:8888'
    axios.interceptors.request.use(config => {
      // config:在请求前做的事情
      if (config.url !== '/user/login') {
        config.headers.Authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5NTA4NDAsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTIzNjQwLCJuYmYiOjE2NjQ5NTA4NDB9.QRy4riQml4Q0kL7hHejHrXqbMMiR8npgI_7b413_3mY'
      }
      console.log(config);
      return config
    }, error => {
      // error：请求失败的回调
      alert('请求失败')
      return Promise.reject(erro)
    })

    // 响应拦截器
    axios.interceptors.response.use(response => {
      console.log(response,'响应数据');
      let res=response.data
      return res
    }, erro => {
      return Promise.reject(erro)
    })
    axios.post('/user/login', {
      username: 'admin1',
      password: 123321
    }).then(res => {
      console.log(res);
    })
    axios.get('/carousel/findAll').then(res => {
      console.log(res);
    })
  </script>
</body>

</html>

如图

 

干的漂亮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于Vue axios的介绍
shibest123456的博客
07-13 470
最近在看一些vue组件 很多调用后台的接口会用到axios记录和分享一下axios是基于promise的http库首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应
axios踩坑，不同版本默认Content-Type不同
PBitW的博客
01-13 3816
1、请求封装 2、问题 axios 0.21源码 axios 1.2源码 总结
Vue之axios
weixin_45740885的博客
06-09 3391
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种简洁、直观的方式来进行网络请求，并支持诸如拦截器、取消请求、错误处理等功能。目前axios主要分为两个版本：Axios 0.x 版本是旧版的 Axios，它支持浏览器和 Node.js 环境。它使用的是基于 XHR（XMLHttpRequest）的传统 AJAX 请求。在 0.x 版本中，Axios 使用回调函数来处理响应结果。
最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品
lazy_tomato的博客
02-27 1807
接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。总的来说，截至目前，；；两者都可以实现取消请求。底层逻辑相同：都是通过传入配置参数，再手动触发对应参数的取消方法。差异：传入的配置对象不同。
使用axios文件上传中的坑
syj21408的博客
04-30 326
我遇到的坑，axios版本问题 以前的项目写过文件上传就将代码复制了过来，然后两个项目的axios版本不一样，0.21.1和0.27.1 export function avatar(form) { let headers = { 'Content-Type': 'multipart/form-data' } return request({ url: '/user/profile/avatar', method: 'post',
axios.min.js
12-30
vue使用请求数据axios下载axios.js源文件
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
axios-0.19.2.zip
08-27
axios.min.js下载
axios-1.0.0-alpha.1中的axios.main.js
07-21
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 ...
axios0.27.2（axios.js）
06-07
axios0.27.2（axios.js）
axios的js文件下载资源
08-30
Axios的js文件下载资源，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 ...
封装axios.js
07-01
封装axios.js,带token拦截的，GET和POST都有，还有PUT和DELETE
Error：in ./node-modules/axios/lib/platform/index.js
最新发布
12-22
Error：in ./node-modules/axios/lib/platform/index.js
axios 面向对象封装
03-22
axios 面向对象封装 可以多实例调用
【axios】-- 一文带你入门axios
qq_48802092的博客
10-07 872
axios提供了两种拦截器： 请求拦截器（成功，失败） 响应拦截器（成功，失败） 拦截器的作用： 在网络请求时发起请求 请求响应时对操作进行相应的处理 拦截器的应用场景： 请求拦截器成功时，可以添加网页加载的动画等 响应拦截器成功时，可以进行数据的相应处理
Vue axios和vue-axios的关系及使用区别
Tongyao
08-01 3111
在使用axios或vue-axios时我们基本都会需要配置axios的拦截器，对axios的请求、响应进行二次封装，会多一道工作。在vue项目当中，可以使用。使用Vue的插件写法，更符合Vue整体生态环境。而直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。因此，我们更推荐使用。使用的时候不能像vue的插件（如Vue-Router、VueX等）通过。是基于promise的HTTP库，可以使用在浏览器和。插件的方式，不太推荐是直接使用。中，它不是vue的第三方插件。...........
ajax和axios区别及优缺点
热门推荐
Senora的博客
12-29 3万+
ajax和axios介绍、原理、区别及优缺点
HTTP 强缓存和协商缓存
风萧萧兮易水寒
09-25 2184
对于客户端来说，HTTP缓存是web性能优化的重要手段。 优势： 减少了冗余的数据传递，节省宽带流量 减少了服务器的负担，大大提高了网站性能 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。 用户体验好 缺点： 缓存中的数据可能与服务器的数据不一致 消耗内存 浏览器缓存一般是针对静态资源（js/css/img等），我们将缓存分为强缓存和协商缓存，两者的主要区别是...
axios
06-02
import axios from 'axios'; axios.get('/user', { params: { name: 'John Doe' } }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 这是一个简单的GET...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值