Axios的理解和使用

最新推荐文章于 2024-06-21 07:30:00 发布
最新推荐文章于 2024-06-21 07:30:00 发布
阅读量385 收藏 3
点赞数
分类专栏： Ajax axios 文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56571733/article/details/115732105
版权

Axios的理解和使用

什么是Axios

  • 前端最流行的 ajax 请求库
  • react/vue 官方都推荐使用 axios 发 ajax 请求
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。
  • 文档: https://github.com/axios/axios

Axios 特点

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

Axios的基本使用

axios(config): 通用/最本质的发任意类型请求的方式
axios({
	// 请求类型 GET/POST/PUT/DELETE
   method:"GET", 
   // URL
   url:"http://localhost:3000/data"
}).then(res => {
   console.log(res);
})

axios.request(config): 等同于 axios(config) 
axios(url[, config]): 可以只指定 url 发 get 请求  
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求

Axios请求响应结果的结构

  • config：配置对象 是为请求提供的配置信息
  • data：响应体， 由服务器提供的响应 （json解析）
  • headers：响应头信息
  • request：原生的AJAX请求对象
  • status：来自服务器响应的 HTTP 状态码
  • statusText：来自服务器响应的 HTTP状态信息
    在这里插入图片描述

Axios配置对象详细说明

{
	// `url` 是用于请求的服务器 URL
	url: '/user',
	
	// `method` 是创建请求时使用的方法
	method: 'GET', // default

	// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
	// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
	baseURL: 'https://some-domain.com/api/',

	// `transformRequest` 允许在向服务器发送前，修改请求数据
	// 只能用在 ‘PUT‘, ‘POST‘ 和 ‘PATCH‘ 这几个请求方法
	// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
	transformRequest: [function (data, headers) {
		// 对 data 进行任意转换处理
		return data;
	}],

	// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
	transformResponse: [function (data) {
		// 对 data 进行任意转换处理
		return data;
	}],

	// `headers` 是即将被发送的自定义请求头
	headers: {'X-Requested-With': 'XMLHttpRequest'},

	// `params` 是即将与请求一起发送的 URL 参数
	// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
	params: {
		ID: 12345
	},

	// `paramsSerializer` 是一个负责 `params` 序列化的函数
	// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
	paramsSerializer: function(params) {
		return Qs.stringify(params, {arrayFormat: 'brackets'})
	},

	// `data` 是作为请求主体被发送的数据
	// 只适用于这些请求方法 ‘PUT‘, ‘POST‘, 和 ‘PATCH‘
	// 在没有设置 `transformRequest` 时，必须是以下类型之一：
	// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
	// - 浏览器专属：FormData, File, Blob
	// - Node 专属： Stream
	data: {
		firstName: 'Fred'
	},

	// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
	// 如果请求话费了超过 `timeout` 的时间，请求将被中断
	timeout: 1000,
	
	// `withCredentials` 表示跨域请求时是否需要使用凭证
	withCredentials: false, // default

	// `adapter` 允许自定义处理请求，以使测试更轻松
	// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
	adapter: function (config) {
		/* ... */
	},

	// `auth` 表示应该使用 HTTP 基础验证，并提供凭据
	// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
	auth: {
		username: ‘janedoe‘,
		password: ‘s00pers3cret‘
	},

	// `responseType` 表示服务器响应的数据类型，可以是 ‘arraybuffer‘, ‘blob‘, ‘document‘, ‘json‘, ‘text‘, ‘stream‘
	responseType: 'json', // default

	// `responseEncoding` indicates encoding to use for decoding responses
	// Note: Ignored for `responseType` of ‘stream‘ or client-side requests
	responseEncoding: 'utf8', // default

	// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
	xsrfCookieName: 'XSRF-TOKEN', // default
	
	// `xsrfHeaderName` is the name of the http header that carries the xsrf token value `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
	xsrfHeaderName: 'X-XSRF-TOKEN', // default

	// `onUploadProgress` 允许为上传处理进度事件
	onUploadProgress: function (progressEvent) {
		// Do whatever you want with the native progress event
	},

	// `onDownloadProgress` 允许为下载处理进度事件
	onDownloadProgress: function (progressEvent) {
		// 对原生进度事件的处理
	},

	// `maxContentLength` 定义允许的响应内容的最大尺寸
	maxContentLength: 2000,
	
	// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
	validateStatus: function (status) {
		return status >= 200 && status < 300; // default
	},
	
	// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
	// 如果设置为0，将不会 follow 任何重定向
	maxRedirects: 5, // default
	
	// `socketPath` defines a UNIX Socket to be used in node.js.
	// e.g. ‘/var/run/docker.sock‘ to send requests to the docker daemon.
	// Only either `socketPath` or `proxy` can be specified.
	// If both are specified, `socketPath` is used.
	socketPath: null, // default
	
	// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
	// `keepAlive` 默认没有启用
	httpAgent: new http.Agent({ keepAlive: true }),
	httpsAgent: new https.Agent({ keepAlive: true }),
	
	// ‘proxy‘ 定义代理服务器的主机名称和端口
	// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
	// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
	proxy: {
		host: '127.0.0.1',
		port: 9000,
		auth: {
			username: 'mikeymike',
			password: 'rapunz3l'
		}
	},
	
	// `cancelToken` 指定用于取消请求的 cancel token
	// （查看后面的 Cancellation 这节了解更多）
	cancelToken: new CancelToken(function (cancel) {
	})
}

Axios的默认配置

//获取按钮
const btns = document.querySelectorAll('button');

axios.defaults.method ="GET"
axios.defaults.baseURL ="http://localhost:3000"
axios.defaults.params = {id:100}
axios.defaults.timeout = 3000

// get请求 获取列表
btns[0].onclick = function(){
    axios({ 
        url:"/data"
    }).then(res => {
        console.log(res);
    })
}

在这里插入图片描述

Axios创建实例对象发送请求

//获取按钮
const btns = document.querySelectorAll('button'); 

const instance = axios.create({
    baseURL:"http://localhost:3000", 
    timeout:"3000"
})

// 这里的 instance 与axios对象的功能几近是一样的
console.log(instance) 
btns[0].onclick = function(){
    // 方法一
    // instance({ 
    //     url:"/data"
    // }).then(res => {
    //     console.log(res);
    // })

    // 方法二
    instance.get('/data').then(res => {
        console.log("res",res);
    })
}

Axios配置的优先级

axios的配置有四种

1、默认配置，如默认的get请求
2、全局配置，如全局定义的baseURL：

axios.defaults.baseURL ="http://localhost:3000"

3、实例配置

const instance = axios.create({
    baseURL:"http://localhost:3000", 
    timeout:"3000"
})

4、发送请求配置

axios({  
	url: '/data', 
}).then(res => { 
	console.log(res); 
})

这些配置的优先级

1、在lib.default.js找到的库的默认值
2、然后是全局的defaults配置
3、然后是实例的defaults属性
4、最后是请求的config参数

Axios拦截器

什么是拦截器

axios提供了拦截器，用于加载我们在发送每次请求或者得到响应后，进行对应的处理。
拦截器的定义：就是在请求或响应被then或catch处理前拦截它们

分类

请求拦截 interceptors.request.use()

发送请求：此时前端会将后台需要的参数等一系列数据发送，但是当加入axios的请求拦截器时，就会阻挡数据传输，在此期间可以修改传过来的参数的数据。如果满足条件，再去发送请求。如果未满足条件， 请求可以直接停止、取消。

比如config中的一些信息不符合服务器的要求，得及时拦截下来更改。
比如每次发送网络请求的时候，都希望在界面中显示一个动态加载的请求图标，就是一直在转圈圈，让用户知道当前页面正在加载数据，准备渲染视图。
比如某些网络请求（比如登录token）,必须携带一些特殊的信息。

响应拦截 interceptors.response.use()

返回响应：原理与请求时一致，只是这个时候是后天根据欠你的传过来的参数返回一系列后台数据给前端，在此期间，同样可以对响应回来的数据进行处理，通常可以对响应回来的数据进行过滤等操作 。
有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。

代码示例

成功的 执行顺序

// 
// 添加请求拦截器 config 就是配置对象
axios.interceptors.request.use(function (config) {
  console.log("请求拦截器 成功");
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  console.log("请求拦截器 失败");
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log("响应拦截器 成功");
  // 对响应数据做点什么
  return response;
}, function (error) {
  console.log("响应拦截器 失败");
  // 对响应错误做点什么
  return Promise.reject(error);
});

// 发送请求
axios({ 
    method: "GET", 
    url: "http://localhost:3000/data"
}).then(res => {
    console.log("发送请求 成功",res);
}).catch(err => {
    console.log("发送请求 失败",err);
})

在这里插入图片描述
失败的执行顺序

// 失败的执行顺序
// 添加请求拦截器 config 就是配置对象
axios.interceptors.request.use(function (config) {
    console.log("请求拦截器 成功");
    // 在发送请求之前做些什么
    throw "参数出错了"
}, function (error) {
    console.log("请求拦截器 失败");
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    console.log("响应拦截器 成功");
    // 对响应数据做点什么
    return response;
}, function (error) {
    console.log("响应拦截器 失败");
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 发送请求
axios({ 
    method: "GET", 
    url: "http://localhost:3000/data"
}).then(res => {
    console.log("发送请求 成功",res);
}).catch(err => {
    console.log("发送请求 失败",err);
})

在这里插入图片描述
多个拦截器的执行顺序

axios.interceptors.request.use(function (config) {
  console.log("请求拦截器 成功1");
  // 在发送请求之前做些什么
  return config
}, function (error) {
  console.log("请求拦截器 失败1");
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log("响应拦截器 成功1");
  // 对响应数据做点什么
  return response;
}, function (error) {
  console.log("响应拦截器 失败1");
  // 对响应错误做点什么
  return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
  console.log("请求拦截器 成功2");
  // 在发送请求之前做些什么
  return config
}, function (error) {
  console.log("请求拦截器 失败2");
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log("响应拦截器 成功2");
  // 对响应数据做点什么
  return response;
}, function (error) {
  console.log("响应拦截器 失败2");
  // 对响应错误做点什么
  return Promise.reject(error);
});


// 发送请求
axios({ 
  method: "GET", 
  url: "http://localhost:3000/data"
}).then(res => {
  console.log("发送请求 成功",res);
}).catch(err => {
  console.log("发送请求 失败",err);
})

在这里插入图片描述

移除一个拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

Axios取消请求

服务器延迟

json-server cb.json -d 3000

<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送请求 </button>
<button class="btn btn-warning"> 取消请求 </button> 
</div>
<script>
//获取按钮
const btns = document.querySelectorAll('button'); 
// 2、定义一个全局变量
let cancel = null; 
// get请求 获取列表
btns[0].onclick = function(){
// 检测上一次请求是否完成
if( cancel != null ){
	cancel()
}
 axios({
     // 请求类型
     method:"GET",
     // URL
     url:"http://localhost:3000/data",
     // 1、添加配置对象的属性
     cancelToken:new axios.CancelToken(function(c){
         // 3、将c的值赋值给cancel
         cancel = c;
     })
 }).then(res => {
     console.log(res);
      cancel = null; 
 })
}

// 取消请求
btns[1].onclick = function(){
 cancel();
}

</script>

在这里插入图片描述

Axios的并发请求

  1. axios.all() 和 promise.all() 方法是一个道理

  2. axios.all() 这个方法在 axios 的构造函数是没有的，没在实例对象上。

  3. 如果使用 axios.all 就不能使用封装的 axios了，因为all 是 axios 特有的方法，封装axios没有这个方法。

  4. all 方法是一个数组

function getData() {
 return axios.get('http://localhost:3000/data');
}
function getList() {
 return axios.get('http://localhost:3000/data');
}
axios.all([getData(), getList()])
 .then(axios.spread(function (acct, perms) { 
     console.log(acct, perms);
 }));

在这里插入图片描述

总结：两个请求执行完成后，才执行axios.spread()中的函数，且axios.spread()回调函数的的返回值中的请求结果的顺序和请求的顺序一致

m0_56571733
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios基础理解(小部分)
05-23
axios基础理解(小部分)
Axios简介
fj123321666的博客
03-27 4919
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiospromise异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
axios介绍和使用
c103363的博客
02-20 3348
Axios是一个基于Promise的JavaScript HTTP客户端，用于浏览器和Node.js环境。它可以发送HTTP请求并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换JSON数据等功能。
axios详解
最新发布
这河里吗l的博客
06-21 963
axios（ajax i/o system）不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。axios与ajax的区别、axios发送GET和POST请求、axios实现拦截器。
14.Vue网络请求：axios
高新园养鸡场
09-04 436
简介 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。   请求方法的别名 为方便使用，官方为所有支持的请求方法提供了别名，可以直接使用别名来发起请求： axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(u
HarmonyOS 鸿蒙应用开发 (七、HTTP网络组件 axios 介绍及封装使用)
热门推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-27 2万+
在HarmonyOS（OpenHarmony）中，@ohos/net.http 是官方提供的一个用于进行HTTP通信的基础模块。开发者可以利用这个模块发送和接收HTTP请求与响应，实现应用程序与服务器之间的数据交互。文档中心--HTTP数据请求。
Axios学习笔记
qq_53957101的博客
09-13 848
axios学习，自行整理基础知识
vue 里面使用axios 和封装的示例代码
08-29
Vue 中使用 Axios 和封装的示例代码 在 Vue 项目中，使用 Axios 库来发送请求是一种常见的做法。Axios 库提供了一个基于...该示例代码可以帮助开发者更好地理解 Axios 库的使用，并提供一个全局的 Ajax 请求解决方案。
vue全局使用axios的操作
10-14
在Vue.js应用中，axios是一个常用的HTTP库，用于发送AJAX请求。然而，与某些其他插件（如vue-resource）不同，axios并不提供一个...在实际开发中，确保理解每个库的工作原理和最佳实践，以构建高效且可维护的应用程序。
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）
10-17
在本文中，我们将深入探讨如何在项目中有效地封装和使用axios，以及如何设置拦截器来处理特定请求，并判断所有请求是否加载完毕。Axios 是一个基于Promise的HTTP库，适用于浏览器和Node.js环境，它提供了丰富的特性...
解决Nuxt使用axios跨域问题
10-15
本篇文章将详细讲解如何在Nuxt.js项目中使用axios解决跨域问题。 首先，我们需要理解什么是跨域。跨域是指一个域下的资源请求另一个域下的资源，由于浏览器的安全策略，这种行为通常会被阻止。在Nuxt.js中，由于...
Vue中的axios介绍
09-19 1562
一，使用axios发送ajax请求 vue本身不具备发送ajax的请求，所以要借助第三方库来完成； 1.在1.x版本发送ajax请求可以使用vue-resource，不过现在vue-resource不在维护，官方推荐使用axios代替； vue-resource官网：点击进入 2.axios是一个基于Promise用于浏览器和node.js的HTTP客户端，可以用来发送ajax请求； a...
掌握 Axios：一款强大的 HTTP 客户端库
里查叔叔
02-23 606
Axios 是一款基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了一种简单且易于使用的方式来发送 HTTP 请求，并支持 Promise API、拦截请求和响应、转换请求和响应数据等功能。支持 Promise API，可以使用 async/await 语法更加简洁地处理异步请求；支持拦截请求和响应，可以在请求发送前或响应返回后进行一些处理；支持请求和响应数据的转换，可以方便地处理数据格式；支持取消请求，可以避免不必要的请求浪费资源；
axios 的作用及包含的方法
YHLSunshine的博客
03-29 6983
学习目标： 了解 axios 学习内容： axios的作用及包含的方法 学习笔记： 1、axios 是什么？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。主要用于向后台发送请求。 2、axios 的作用 主要用于向后台发送请求。 3、axios 的特点 （1）、从 node.js 创建http 请求 （2）、转换请求数据和响应数据 （3）、自动转换json数据 （4）、拦截请求和响应 （5）、支持Promise API （6）、 从浏览
Axios 是什么?
Webbei的博客
09-20 1370
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。注：axios的请求方式有很多，我们常用的get ,post 请求，其他的并不常用。
axios的介绍及使用
qq_44866810的博客
02-08 873
axios的基本介绍及使用方式（特点，常用语法，axios 基本请求，请求配置，响应结构，实例创建，配置参数，拦截器interceptors）
Axios介绍
归兮的博客
08-16 855
Axios是专注于网络数据请求的库，相比于XMLHttpRequest对象。axios简单易用，相比于jQuery，axios更加轻量化，只专注于网络数据请求引入外部js文件Axios发送请求的语法：其中then中执行成功后的回调函数Axios发送请求的语法：其中then中执行成功后的回调函数小练习node 运行的js后台文件，每次接口调用时都需要在终端使用nide运行js文件以下代码直接c v到js文件中。...
vue工程 axios请求数据传统使用方法介绍+经验优化使用方法
java_dazhuzhu的博客
04-27 981
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
axios
qq_43573743的博客
02-01 452
作用 向后端发送ajax请求 json-server 作用：在前后端分离的项目中，在后端没写好之前，无法直接和后端交互，所以需要模拟后端。JSON server可以简单快速实现后端功能 使用方法：使用npm按照（需要已经安装好npm） 查看是否已经按照npm 在cmd下输入npm -version看是否显示版本号 第一步： npm install -g json-server ...
axios理解不了怎么办
07-08
如果你对Axios的理解存在困难，可以尝试以下几个方法来帮助你更好地理解和使用Axios： 1. 阅读Axios的官方文档：Axios的官方文档提供了详细的说明和示例，可以帮助你了解Axios的各种功能和用法。仔细阅读文档，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值