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 (或者设置为 null 或 undefined)，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

相关文章