Axios的概述和基本使用

于 2024-05-05 12:15:00 发布
阅读量670 收藏 24
点赞数 8
文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liufang_imei/article/details/138315073
版权
本文详细介绍了Axios，一个广泛用于React和Vue的Ajax请求库，涵盖了其特点、基本使用方法、配置选项、拦截器、取消请求和在Vue中封装的应用。
摘要由CSDN通过智能技术生成

02 【Axios的概述和基本使用】

1.Axios 是什么?

  1. 前端最流行的Ajax请求库
  2. react/vue 官方都推荐使用 axios 发ajax 请求
  3. 文档: https://github.com/axios/axios

2.Axios 特点

  1. 基于 xhr + promise 的异步 ajax请求库
  2. 浏览器端/node 端都可以使用
  3. 支持请求／响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送多个请求

3.Axios 常用语法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url 发get 请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get 请求
axios.delete(url[, config]): 发delete 请求
axios.post(url[, data, config]): 发post 请求
axios.put(url[, data, config]): 发put 请求

axios.defaults.xxx: 请求的默认全局配置（method\baseURL\params\timeout…）
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

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

axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

image-20220625194840070

4.使用

4.1 配置对象常用的配置项

{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },

  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',

  //响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  }

代码

    <button id="btn1">发送get请求</button> <br><br>
    <button id="btn2">发送post请求</button><br><br>
    <button id="btn3">发送put请求</button><br><br>
    <button id="btn4">发送delete请求</button>

    <hr>

    <div>其他发送请求的api:</div><br><br>
    <button id="btn5">发送get请求1</button> <br><br>
    <button id="btn6">发送post请求1</button><br><br>
    <button id="btn7">发送put请求1</button><br><br>
    <button id="btn8">发送delete请求1</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //发送get
    document.getElementById("btn1").onclick = function(){
       axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn2").onclick = function(){
       axios({
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
            title:"axios学习",
            author:"Yehaocong"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    //发送put
    document.getElementById("btn3").onclick = function(){
       axios({
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
            title:"axios学习",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
       axios({
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
           console.log(response);
       })
    };



    //其他发送请求的api


    document.getElementById("btn5").onclick = function(){
        //发送get,使用get，第一个参数时url，第二个参数时config配置对象
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn6").onclick = function(){
        //发送post请求，第一个参数时url，第二个参数时请求体，第三个参数时config配置对象
        axios.post("http://localhost:3000/posts",
        {title:"axios学习2",
            author:"Yehaocong2"})
            .then(response=>{
           console.log(response);
       })
    };
    //发送put,
    document.getElementById("btn7").onclick = function(){
        //发送put,接收三个参数，url  请求体 、 config配置对象
       axios.put("http://localhost:3000/posts/2",{title:"axios学习",
            author:"Liaoxiaoyan"})
       .then(response=>{
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
        //发送delete请求，接收2个参数， url config配置对象
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
           console.log(response);
       })
    };

image-20220625195401372

4.2 默认配置

可以设置全局默认配置，是为了避免多种重复配置在不同请求中重复，比如baseURL、timeout等，这里设置baseURL。

        axios.defaults.baseURL="http://localhost:3000";

        //因为上面配置了baseURL，所以我们之后的请求只需要配置url不用像之前那样的全路径
        axios.get("/posts/1")
       .then(response=>{
           console.log(response);
       })

5.创建一个新的axios对象

根据指定配置创建一个新的 axios, 也就是每个新 axios 都有自己的配置
新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
为什么要设计这个语法?
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理（比如有多个baseURL需要指定）
(2) 解决: 创建2 个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

const instance = axios.create({ // instance是函数类型
    baseURL: 'http://localhost:3000'
})

// 使用instance发Ajax请求
instance({
    url: '/posts'
})

instance.get('/posts')

6.拦截器

请求拦截器（在发送请求前，使用函数对请求的参数和内容进行处理和检测，若请求有问题可直接进行拦截->取消，后进先执行=则后面的请求拦截器先执行）

响应拦截器（对响应的结果预处理，先进先执行=前面的响应拦截器先执行）

1）请求拦截器：

① 在真正发送请求前执行的回调函数

② 可以对请求进行检查或配置进行特定处理

③ 失败的回调函数，传递的默认是error

④ 成功的回调函数，传递的默认是config（也必须是）

2）响应拦截器

① 在请求得到响应后执行的回调函数

② 可以对响应数据进行特定处理

③ 成功的回调函数，传递的默认是response

④ 失败的回调函数，传递的默认是error

3）请求转换器：对请求头和请求体数据进行特定处理的函数

响应转换器：将响应体json字符串解析为js对象或数组的函数

  1. 说明: 调用axios()并不是立即发送ajax 请求, 而是需要经历一个较长的流程
  2. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
  3. 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response

代码

script>
      //设置一个请求拦截器，在请求拦截器中可以对请求参数进行修改
      //config：配置对象
      axios.interceptors.request.use(
        function (config) {
          console.log("请求拦截器 成功 1号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.params = { a: 100 };
          return config;
        },
        error => {
          console.log("请求拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      axios.interceptors.request.use(
        function (config) {
          config.timeout = 5000;
          console.log("请求拦截器 成功 2号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.timeout = 2000;
          return config;
        },
        error => {
          console.log("请求拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器，可以对响应结果做一些处理
      axios.interceptors.response.use(
        function (response) {
          console.log("响应拦截器 成功 1号");
            //返回到请求回调时，只要data数据
             return response.data;
        },
        function (error) {
          console.log("响应拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器
      axios.interceptors.response.use(
        function (response) {
          console.log("响应拦截器 成功 2号");
          return response;
        },
        function (error) {
          console.log("响应拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //发送请求
      axios({
        method: "GET",
        url: "http://localhost:3000/posts",
      })
        .then((response) => {
          console.log("自定义回调处理成功的结果");
          //console.log(response);
        })
        .catch((reason) => {
          console.log(reason);
        });
    </script>

image-20220625200618691

7.取消请求

0.22版本之前可以使用,0.22开始被废弃

  <body>
    <div class="container">
      <h1 class="page-header">axios取消请求</h1>
      <button class="btn btn-primary">发送请求</button>
      <button class="btn btn-warning">取消请求</button>
    </div>
  </body>
  <script>
    //获取按钮
    const btns = document.querySelectorAll("button");
    //2.声明一个全局变量
    let cancel = null;
    //发送请求
    btns[0].onclick = () => {
      //检测上一次请求是否已经完成
      if (cancel !== null) {
        //则代表上一次请求还未取消，故直接取消上一次请求
        cancel();
      }
      axios({
        method: "GET",
        url: "http://localhost:3000/posts",
        //1.添加配置对象的属性
        cancelToken: new axios.CancelToken((c) => {
          //3.将c的值赋值给cancel
          cancel = c;
        }),
      }).then((response) => {
        console.log(response);
        //当请求执行完后 将cancel进行初始化设置
        cancel = null;
      });
    };

    //取消请求
    btns[1].onclick = () => {
      cancel();
    };
  </script>

0.22新方法

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
 let btn = document.querySelectorAll('button');
const controller = new AbortController();
      btn[0].onclick = function () {
          axios( {
              url:'https://api.uomg.com/api/get.kg?songurl=https://node.kg.qq.com/play?s=YaCv8EYfJunVWYcH',
              signal: controller.signal
              }).then(function(response) {
                  console.log(response);
              });
      }

      btn[1].onclick = function () {
        controller.abort()
      }

8.在vue中封装axios

requests.js

//对于axios进行二次封装
import axios from 'axios';
//获取仓库:存储数据
import store from '@/store';

//axios.create方法执行,其实返回一个axios和request一样的
let requests = axios.create({
  //基础路径,发请求URL携带api【发现:真实服务器接口都携带/api】
  baseURL: '/api',
  //超时的设置
  timeout: 5000,
});

//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
  //请求拦截器:请求头【header】,请求头能否给服务器携带参数
  //请求拦截器：其实项目中还有一个重要的作用,给服务器携带请求们的公共的参数
  if (store.state.detail.nanoid_token) config.headers.userTempId = store.state.detail.nanoid_token;
  if (store.state.user.token) config.headers.token = store.state.user.token;

  return config;
});

//响应拦截器：请求数据返回会执行
requests.interceptors.response.use(
  res => {
    //res:实质就是项目中发请求、服务器返回的数据
    return res.data;
  },
  err => {
    //温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
    alert(err.message);
    //终止Promise链
    return new Promise();
  }
);

//最后需要暴露:暴露的是添加新的功能的axios,即为requests
export default requests;

使用

import requests from '@/api/requests';
//注册的接口
export const reqRegister = data =>
  requests({ url: `/user/passport/register`, method: 'post', data });
雨果同学的编程之路
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器
YK菌的博客
03-04 1万+
文章目录1. 自己创建一个API1.1 API 的分类1.2 使用json-server 搭建REST API2.9.1 json-server 是什么?2.9.2 使用json-server2.9.3 使用浏览器访问测试2.9.4 使用axios 访问测试4. XHR 的 ajax 封装 (简单版axios)4.1 特点4.2 编码实现4.3 使用测试6 axios 的理解和使用6.1 axios 是什么?6.2 axios 特点6.3 axios 常用语法6.4 难点语法的理解和使用6.4.1 axio
axios安装包
02-19
以上就是 Axios 的核心特性和基本用法。通过深入学习 Axios，开发者能够更高效地处理 HTTP 请求，提升前端项目的性能和安全性。同时，标签中的“前端技术”也提醒我们，Axios 是现代前端开发中不可或缺的工具之一。...
Ajax的学习与基本使用
03-08
Ajax学习，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，
axios的基本使用
qq_56088882的博客
08-03 7221
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
Axios的使用教程
最新发布
m0_46319477的博客
04-28 693
Axios，在服务端它使用原生 node.js模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。网络请求库，作用于node.js。Axios 是一个基于。
axios的使用及说明
m0_72167535的博客
01-01 1792
第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios 使用详解
热门推荐
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
Axios 使用详解
qq_34185872的博客
02-16 3378
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
Axios使用详解
m0_67942533的博客
10-06 5403
Axios使用详解
pixabay_img_finder:使用React，Axios和Material-UI的图片搜索器
05-01
Axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中使用。在`pixabay_img_finder`项目中，Axios被用来向Pixabay API发起请求，获取图片数据。它支持异步操作，使得在React组件中管理网络请求变得更加简单，...
northone:使用React和React-Redux Hooks的基本ReactRedux项目。 使用Redux-Sagas在redux状态下管理异步调用，并使用自定义选择器。 为了简单起见，它使用Axios进行HTTP调用。 使用Bootstrap和FontAwesome进行样式设置。 使用FullCalendar。 使用基本的Node.jsExpress后端和Mongo Cloud中托管的MongoDB数据库
05-20
应用概述使用React和React-Redux Hooks的基本React / Redux项目。 使用Redux-Sagas在redux状态下管理异步调用，并使用自定义选择器。 为了简单起见，它使用Axios进行HTTP调用。 使用Bootstrap和FontAwesome进行样式...
关于前端ajax请求的优雅方案（http客户端为axios）
08-28
Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 五、统一封装接口请求 使用Proxy可以对所有的接口请求做...
axios的使用
m0_60827885的博客
01-31 2239
这样我们封装的request函数就可以使用了，一般项目中我们都会创建一个文件夹用来放所有的接口，起名为api,在文件夹中创建不同页面的文件，写入不同的接口，首先要引入request。首先，需要在src文件夹下创建一个文件夹，一般取名为utils(是应用程序的简写，小方法）定义好了requst函数，如何去使用呢。引入：import axios from 'axios'一、axios是基于promiss对ajax的一种封装。在下面创建一个文件，取名为request（请求）1.1要使用axios下载引用。
Axios的介绍与使用
dafsq的博客
04-26 590
Axios的介绍与使用
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
weixin_54048131的博客
07-28 506
npm i axios-S
【axios】axios的基本使用
weixin_43790653的博客
04-01 2万+
axios是一个专注于网络请求的库。 不同于jquery，功能复杂，既可以操作dom，又可以做动画，还可以发ajax请求。axios是一个专注于网络请求的库。 一、基本使用 1.导入库文件 在js中导入axios的库文件后，会直接在全局挂载一个axios方法，就可以直接使用了。 <!-- 导入axios的库文件 --> <script src="lib/axios.js"></script> <script> console.log(axios); &
Axios简介
fj123321666的博客
03-27 4907
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiospromise异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
使用spring Boot和vue实现学生信息管理系统
07-17
使用Spring Boot和Vue实现学生信息管理系统是一种常见的组合。下面是一些基本的步骤： 1. 数据库设计：首先需要设计数据库模型，包括学生信息表、课程表、成绩表等。可以使用MySQL或其他数据库来存储数据。 2. 后端开发：使用Spring Boot框架来开发后端API接口，包括学生信息的增删改查等功能。可以使用Spring Data JPA或MyBatis来简化数据库操作。 3. 前端开发：使用Vue框架来开发前端页面，包括学生信息的展示、编辑和删除等功能。可以使用Vue Router进行页面路由管理，使用Axios进行与后端API的数据交互。 4. 前后端交互：前端通过Axios发送HTTP请求，调用后端API接口来获取和提交数据。可以使用JSON格式进行数据传输。 5. 部署和测试：将后端部署到服务器上，并确保前端页面可以正常访问和操作。进行测试，确保学生信息管理系统的功能正常运行。 以上只是一个简单的步骤概述，具体实现涉及到更多细节和技术选型。你可以根据具体需求和技术能力选择适合的工具和框架来实现学生信息管理系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨果同学的编程之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值