axios基础知识

时间:2024-10-13 21:59:05

文章目录

  • 前言
  • 一、axios发送数据的返回情况
    • 1、默认情况下,http状态码是2开始,则让promise状态成功
    • 2、自定义服务返回的HTTP状态码为多少是成功,为多少失败!!
  • 二、基于axios发送请求的方式
    • 1、axios([config]) 或者 axios([url],[config])
    • 2、([config])
    • 3、/delete/head/options([url],[config])
    • 4、创建axios 实例发起请求
  • 三、axios发送请求时候的配置项 config
    • 1、url
    • 2、baseURL请求地址的通用前缀
    • 3、transformRequest
    • 4、transformResponse
    • 5、 headers:{...} 自定义请求头信息
    • 6、 params:{...}
    • 7、data:{...}
    • 8、 timeout:0 设置超时时间,写0就是不设置
    • 9、 withCredentials:false 在CORS跨域请求中,是否允许携带资源凭证
    • 10、 responseType:把服务器返回的结果设置为指定的格式
    • 11、 onUploadProgress:progressEvent=>{}
    • 12、 validateStatus
  • 四、取消
  • 五、拦截器
    • 5-1、请求拦截器:
    • 5-1、响应拦截器


前言

提示:axios 基于promise封装的库[核心还是基于 XMLHttpRequest 发送请求的]


提示:/zh-cn/docs/

一、axios发送数据的返回情况

基于axios发送数据请求,返回结果都是一个promise实例

1、默认情况下,http状态码是2开始,则让promise状态成功

  • 服务器返回的http状态码是2开始,则让promise状态成功,值是一个respose对象
 response = {
          config:{...}, 发送axios请求设置的配置项
          data:{...}, 服务器返回的响应主体信息
          headers:{...}, 服务器返回的响应头信息
          request:XMLHttpRequest实例对象, 原生的xhr对象
          status:200, 服务器响应的HTTP状态码
          statusText:'OK' 状态码的描述
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • promise状态为失败
    1、服务器有返回信息 [response对象不存在],只不过http状态码不是以2开始的
reason = {
            config:{...},
            isAxiosError: true,
            request:XMLHttpRequest实例对象,
            response:等同于成功获取的response对象,
            toJSON:function...,
            message:'xxx',
            ...
        };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述
2、请求超时 或者 请求中断了
在这里插入图片描述
3、断网了,特点:服务器没有反馈任何的信息

2、自定义服务返回的HTTP状态码为多少是成功,为多少失败!!

官网描述:
validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 validateStatus 返回 true (或者设置为 nullundefined),promise 将被 resolve; 否则,promise 将被 rejecte

 // axios的validateStatus配置项,就是自定义promise实例状态是成功的条件
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  • 1
  • 2
  • 3
  • 4
  • 5

二、基于axios发送请求的方式

1、axios([config]) 或者 axios([url],[config])

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
axios({
	method:'get',
		url:'/user/list',
		params:{
			departmentId:0
		}
	})
.then((response)=>{
	console.log('res',response)
})
.catch((error)=>{
	console.log('error',error)
})



 try{
     let  response = await axios('/user/list',{
      params:{
        departmentId:0
      },
      validateStatus: (status) => {
        return status >= 200 && status < 300; //默认处理机制
      }
    })
 console.log('res',response)
  }catch(response){
    console.dir(response)

  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

2、axios.request([config])

try{
       let  response = await axios.request({
		   	url:'/user/list',
			params:{
				departmentId:0
			},
			validateStatus: (status) => {
				return status >= 200 && status < 300; //默认处理机制
			}
      })
	  console.log('res',response)
    }catch(response){
      console.dir(response)

    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

3、/delete/head/options([url],[config])

(url[, config])
(url[, config])
(url[, config])
(url[, config])
(url[, data[, config]])
(url[, data[, config]])
(url[, data[, config]])
注意
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。# 总结

4、创建axios 实例发起请求

let instance = ([config])
创建的instance等同于axios,使用起来和axios一样…
([url],[config])

实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。

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

三、axios发送请求时候的配置项 config

1、url

url:请求的地址 发送请求的时候,但凡没有单独设置url的,都需要在配置项中指定

2、baseURL请求地址的通用前缀

最后发送请求的时候,是把baseURL和url拼接在一起发送的
(’/user/list’,{
baseURL:‘’,

});
最后发送请求的地址是 ‘/user/list’
特殊情况:如果url地址本身已经存在了 http或者https 等信息,说明url本身就已经是完整的地址了,baseURL的值则无需再拼接了

3、transformRequest

transformRequest 允许在向服务器发送前,修改请求数据
只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
在我们自己.then/catch之前,对服务器返回的结果进行修改

  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],
  • 1
  • 2
  • 3
  • 4

它“只针对POST系列请求”,把我们自己传递[data]格式化为指定的格式,后期再基于请求主体发送给服务器!!
axios内部做了一个处理,根据我们最后处理好的[data]的格式,自动设置请求头中的Content-Type值!!「不一定完全准确」
@1 客户端基于请求主体传递给服务器的数据格式
+ form-data Content-Type:multipart/form-data 主要应用于文件上传/表单提交
+ urlencoded Content-Type:application/x-www-form-urlencoded
GET系列请求:是基于URL问号传参把信息传递给服务器的 ?xxx=xxx&xxx=xxx
xxx=xxx&xxx=xxx 这种字符串就是urlencoded格式字符串
+ raw 泛指,代指文本格式「含:普通格式文本字符串、JSON格式字符串…」
普通字符串 Content-Type:text/plain
JSON格式字符串 Content-Type:application/json

+ binary 进制格式数据 主要应用于文件上传
@2 axios内部在默认情况下,如果我们[data]传递的是个普通对象,而且也没有经过transformRequest处理,则内部默认会把对象变为JSON格式字符串传递给服务器

await axios.post(
		 '/user/login',
		{
			account:"18379005583",
			password:"123456"
		},
		{
		transformRequest:(data)=>{
			return qs.stringify(data)
		}
		}
	 )
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

这样的请求最终是以下面的形式传参。qs作用就是把data转化成 urlencoded 字符串
在这里插入图片描述
return (data)改为return data 则也是一个对象
在这里插入图片描述
假如说传的是一个formdata 格式的数据,那么就不需要qs处理,只有是纯粹对象的时候才会需要qs处理
将上述请求修改成如下:

let fm = new FormData()
	 fm.append("account","3787")
	 await axios.post(
		 '/user/login',
		// fm,
		// {
		// 	username:'uuuu',
		// 	password:'899'
		// },
		'****',
		{
		transformRequest:(data)=>{
				return isPlainObject(data) ? qs.stringify(data) :data
			}
		}
	 )
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

分别传入 fm、纯对象 、和字符串。浏览器的请求参数分别是这样的
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
所以要判断一下。isPlainObject(data) ? (data) :data. 是否是纯粹对象
判断是否为纯粹对象的代码

// 检测是否为纯粹的对象
export const isPlainObject = function isPlainObject(obj) {
    let proto, Ctor;
    if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false;
    proto = Object.getPrototypeOf(obj);
    if (!proto) return true;
    Ctor = proto.hasOwnProperty('constructor') && proto.constructor;
    return typeof Ctor === "function" && Ctor === Object;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

4、transformResponse

在我们自己.then/catch之前,对服务器返回的结果进行修改

transformResponse:data=>{
        // data:从服务器获取的结果,而且是响应主体信息「服务器响应主体返回的信息一般都是JSON格式字符串」
        return data;
     };
  • 1
  • 2
  • 3
  • 4
'
运行

5、 headers:{…} 自定义请求头信息

6、 params:{…}

GET系列请求,基于URL问号参数,把信息传递给服务器;我们params一般设置为对象,axios内部会把对象变为 urlencoded 格式拼接到URL的末尾

7、data:{…}

POST系列请求,基于请求主体传递的信息…

8、 timeout:0 设置超时时间,写0就是不设置

9、 withCredentials:false 在CORS跨域请求中,是否允许携带资源凭证

10、 responseType:把服务器返回的结果设置为指定的格式

‘arraybuffer’, ‘blob’, ‘document’, ‘json’「默认」, ‘text’, ‘stream’ …

11、 onUploadProgress:progressEvent=>{}

 onDownloadProgress:progressEvent=>{}
 监听上传和下载的进度
  • 1
  • 2

12、 validateStatus

status=>status>=200 && status<300
定义服务器返回的状态吗是多少,promise实例是成功的

四、取消

axios请求的取消,依赖于 完成
const source = ();
([url],{
…,
cancelToken: ,
}).catch(reason=>{
// 取消后,promise实例是失败的
});
(’…’); 取消发送

	const source = axios.CancelToken.source()
     let fm = new FormData()
	 fm.append("account","3787")
	 axios.post(
		 '/user/login',
		// fm,
		{
			username:'uuuu',
			password:'899'
		},
		// '****',
		{
			transformRequest:(data)=>{
				return isPlainObject(data) ? qs.stringify(data) :data
			},
			transformResponse:(data)=>{
				console.log(data)
				return JSON.parse(data)
			},
			cancelToken:source.token
		}
	 )
	 .then((res)=>{
		 console.log(res)
	 })
	 .catch((error)=>{
		 console.log(error)
	 })
	setTimeout(()=>{
		source.cancel('cancel')
	})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

五、拦截器

5-1、请求拦截器:

当axios把各方面配置都处理好了,在即将基于这些配置项服务器发送请求的时候,触发请求拦截器

 axios.interceptors.request.use(config=>{
     // config存储的是axios处理的好的配置,我们一般在请求拦截器中修改配置
     //...
     return config;
  });
  • 1
  • 2
  • 3
  • 4
  • 5

5-1、响应拦截器

服务器返回结果,axios已经知道返回的promise实例状态是成功还是失败了,在自己调用 .then/catch 之前,先根据promise状态,把响应拦截器中设置的方法执行!!

 axios.interceptors.response.use(
      response=>{
          //promise实例是成功的,执行这个方法:response存储服务器返回的结果
      },
      reason=>{
          //promise实例是失败的,执行这个方法:reason存储失败的原因
      }
  );
  axios.get([url],[config])
    .then(value=>{})
    .catch(reason=>{});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

官方文档:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17