什么是 axios

Axios 是一个基于 promise 封装的Ajax库，核心是 XMLHttpRequest，可以用在浏览器和 node.js 中

特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON 数据
客户端支持防御 XSRF

安装

使用 npm : npm install axios
使用 bower : bower install axios
使用 cdn : <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios 对象的方法

axios(config) / axios(url[, config])：可以通过向 axios 传递相关配置来创建请求
Cancel / CancelToken: 用于取消ajax请求
all([iterable]): 基于 promise.all 实现 ajax 并行，待所有请求都成功后，返回一个成功的promise实例
spread([callback])：解析出基于all返回的结果
get/delete/head/options 发送对应方式的请求
post/put/patch 发送对应方式的请求
request 发送请求
interceptors 拦截器
- request 请求拦截器
- response 响应拦截器
…

axios 本身是一个函数，基于axios发送的请求，返回的都是promise实例(内部调用axios.Axios)，

then接收的参数：

response.data
response.status
response.statusText
response.headers
response.config

请求配置

配置项：只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

axios({
	// baseURL+url:最终请求的地址，baseURL将自动加在url前面，除非url是一个绝对URL
	baseURL: 'https://some-domain.com/api/', 
	url: '/user', 
	
	//是创建请求时使用的方法 默认是get 
  	method: 'get', 	
	
	//请求头信息
	headers: {
		'X-Requested-With': 'XMLHttpRequest',
		common:{
			"x-Token":"xxx"
		},
		//只针对某种请求设置
		post:{},
		get:{}
	},
  	
  	//params：基于“？”,把params对象一项项拼接到URL末尾，传递给服务器
  	// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
	params: { 
		ID: 12345,
		name:"kk"	
	},
	
	//负责params序列化的函数
	//https://www.npmjs.com/package/qs || http://api.jquery.com/jquery.param/
	paramsSerializer: function(params) {
		return Qs.stringify(params, {arrayFormat: 'brackets'})
	},

	//data：只适用POST系列请求，作为请求主体被发送的数据，
	//默认会把对象变为application/json字符串传递给服务器，值：FormData/binary/raw...
	data: { firstName: 'Fred'},
	
	//在POST系列请求中，传递给then/catch前，允许对响应数据data进行任意转换处理
	transformResponse:function (data) {  return data },	
	
	//在POST请求下，允许在向服务器发送前，对请求主体信息进行任意转换处理
	transformRequest: [function (data, headers) {
	// 判断data必须是纯对象 ，或者try catch处理
	// isPlanObject(data),utils.js判断纯粹对象
	  return Qs.stringify(data);
	}],	
	//零散配置
 	// 指定请求超时的毫秒数,如果请求话费了超过timeout的时间，请求将被中断
	timeout: 1000,
	//表示跨域请求时是否需要使用凭证
	withCredentials:true, // default：false
 	//允许自定义处理请求，返回一个promise并应用一个有效的响应 【类似请求拦截器】
  	adapter: function (config) { /* ... */ },
  	//预设服务器响应的数据类型：arraybuffer/blob/document/json/text/stream
  	//不论服务器返回什么格式，内部转化为预设格式
  	responseType: 'json', // default
	//监听上传/下载进度
	onUploadProgress: function (progressEvent) {/* ... */ },
  	onDownloadProgress: function (progressEvent) {/*对原生进度事件的处理*/},
	
	 //内部定义HTTP 的成功的响应状态码是 resolve/reject的promise 。
	 //返回true/null/undefined，promise将被resolve；否则，promise将被rejecte
	validateStatus: function (status) {
    	return status >= 200 && status < 300; // default
	},
	
  	//定义代理服务器的主机名称和端口
	proxy: {
	  host: '127.0.0.1',
	  port: 9000,
	  auth: {//表示 HTTP 基础验证应当用于连接代理，并提供凭据
	    username: 'mikeymike',
	    password: 'rapunz3l'
	  }
	},
	//用于取消请求
	cancelToken: new CancelToken(function (cancel) {
	})
//...
})

请求方法别名

为方便起见，为所有支持的请求方法提供了别名

axios.request([config])
axios.[ get/ head/ delete/ options ] ( [url],[config])
axios.[ post/ put/ patch ] ([url], [data], [config])

//GET
axios.get("http://127.0.0.1:5500/20210526/index.html",{
    params:{
        name:"kk",
        age:18
    }
}).then(response => {	
	//- config：设定的配置项
	//- headers：响应头信息
	//- request： 原生XHR对象
	//- status/statusText 状态码和状态码的描述 
	//- data:响应主体信息
    console.log("success" ,response);
}).then(data => {	
	//获取响应主体信息，完成对应业务逻辑
    console.log("success" ,data );
}).catch(reason => {	
    console.log("fail",reason);
})

then:

成功：服务器返回的状态码与validateStatus条件一致（readyState===4）
可获取的信息：
- config：设定的配置项
- headers：响应头信息
- request：原生XHR对象
- status/statusText 状态码和状态码的描述
- data:响应主体信息

catch:

失败：
- 服务器返回的状态码与validateStatus条件不一致【起码服务器有返回】
- 服务器没有任何返回，如断网/超过超时时间(timeout)/操作被取消（cancelToken)
可获取的信息：
- config:设定的配置项
- request:原生XHR对象
- toJSON:把得到的信息转换成JSON对象
- message:错误信息
- response: 如果是网络层失败，没有response,如果只是Axios层失败，是存在response
- isAxiosError: 是否为Axios层失败

请求的成功和失败

网络层失败：请求没有发送成功，或者没有任何的响应【没有完成一个HTTP事物】
AXIOS层失败：
- 服务器一定有返回
- 只不过状态码与validateStatus不一致
- 超时或者取消请求
业务层失败：一般都是服务器根据业务需求，基于类似code等标志，来区分不同业务形态和结果

axios类库的应用

axios

什么是 axios

安装

axios 对象的方法

请求配置

请求方法别名

相关推荐