首页 > 其他分享 >axios学习笔记

axios学习笔记

时间:2022-09-26 14:11:08浏览次数:85  
标签:拦截器 请求 url 笔记 学习 ajax axios config

1 axios的理解和使用

1.1 axios是什么

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

1.2 axios特点

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

1.3 axios常用语法

  1. axios(config):通用/最本质的发送任意类型请求的方式
	axios({
		method:'',
		url:'',
		data:''
	})
  1. axios(url[,config]):可以只指定url发get请求
	axios('',{})
  1. axios.request(config):等同于axios(config)
  2. axios.get(url,[,config]):发get请求
	axios.get('',{})
  1. axios.delete(url,[,config]):发delete请求
	axios.delete({
		url:''
		params:{}
	})
  1. axios.post(url[,data[,config]]):发post请求
	axios.post('',{},{})
  1. axios.put(url[,data[,config]]):发put请求
	axios.put('',{},{})
  1. axios.default.xxx: 请求的默认全局配置
	axios.defaults.method = 'GET';//设置默认的请求类型为 GET
	axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
	axios.defaults.params = {id:100};
	axios.defaults.timeout = 3000;
  1. axios.interceptors.request.use():添加请求拦截器
	axios.interceptors.request.use(function (config) {
		console.log('请求拦截器 成功 - 1号');
		//修改 config 中的参数
		config.params = {a:100};
		return config;
	}, function (error) {
		console.log('请求拦截器 失败 - 1号');
		return Promise.reject(error);
	});
  1. axios.interceptors.response.use(): 添加响应拦截器
	axios.interceptors.response.use(function (response) {
		console.log('响应拦截器 成功 1号');
		return response.data;
	}, function (error) {
		console.log('响应拦截器 失败 1号')
		return Promise.reject(error);
	});

1.4 难点语法的理解和使用

1.4.1. axios.create(config)

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

1.4.2 拦截器函数/ajax 请求/请求的回调函数的调用顺序

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

笔记来源(尚硅谷)

标签:拦截器,请求,url,笔记,学习,ajax,axios,config
From: https://www.cnblogs.com/shenjun980326/p/axios.html

相关文章

  • Mysql原理学习
    存储引擎数据库引擎是数据库用于存储、处理和保护数据的核心服务,不同的数据库引擎有其各自的特点,如存储机制、索引技巧、主键的处理、锁的粒度等特点便随着引擎的不同而变......
  • js红宝书学习笔记(一)引用类型
    一.引用类型  ECMAScript中,引用类型是一种数据结构称之为对象定义,,引用对象不同于传统面向对象语言所支持的类和接口等基本结构 创建Object实例的两种方式:new操......
  • 本书的关键学习:实用程序员
    本书的关键学习:实用程序员最近,我看到了AndyHunt和DaveThomas的一本非常受欢迎的书,名为ThePragmaticProgrammer。显然,如果你在谷歌上搜索“最佳编程书籍”,这本书......
  • 多线程——Robyn编程学习(Java)
    多线程的作用能够创建多个线程,此外线程可以体现程序的动态性,提高效率,在抢票以及各种游戏之中具有非常重要的作用。(线程的魅力在坦克大战中体现的淋漓尽致)多线程的知识体......
  • PADS应用笔记:Logic画原理图时设置图业大小
    问题画原理图时默认的图业太小,想换大点怎么办方法在工具->选项界面进入设置界面,在这个界面下进行设置......
  • 【记录】学习 阿里巴巴Java开发手册 (持续更新)
    前言在这里记录一下自己学习编码的规范和规约的过程,希望可以纠正自己的不良习惯,让编码更加规范和合理,具有更加好的可读性。阿里巴巴Java开发手册v1.3.0分为六个部分。针......
  • 软件工程师:意外之旅(如何学习编码和找到工作)
    软件工程师:意外之旅(如何学习编码和找到工作)如果(in_a_rush):如果你上车迟到了,需要完成你最近的副业,或者(上帝保佑)和一个真正的人(不是人工智能)约会,我会为你节省一些时间。TL;......
  • delphi cxSplitter学习笔记
     //cxSplitter禁用移动和拖拽,只允许点击箭头按钮触发缩放(展开和收起)procedureTFraModleBase.cxSplitter3CanResize(Sender:TObject;varNewSize:Integer;varAcc......
  • VeighNa 学习进阶(三) --执行策略(结束)
    先说个结论,看完策略,整个人有点不好了介绍策略处理的文档上,全是以界面介绍为主,如果是用no_ui的,那得自己研究上篇讲了连接行情后,用no_ui的run.py跑起来,里面已经加载了策略,......
  • 汇编学习
    点我代码看汇编1.汇编的风格1.1intel风格指令目的,源opcodedestination,source1.2AT&T风格指令源,目的opcodesource,destination......