axios学习笔记

  • axios学习笔记已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

笔记来源(尚硅谷)


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

笔记来源(尚硅谷)