【Axios】实例带你从放弃到知根知底（1）

最新推荐文章于 2024-07-23 09:33:23 发布
最新推荐文章于 2024-07-23 09:33:23 发布
阅读量541 收藏
点赞数
文章标签： js ajax javascript vue json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45587822/article/details/105124805
版权

Axios从放弃到知根知底

Axios是什么

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

如何安装

有以下几种安装方式
1.npm安装

npm install axios

2.bower安装

bower install axios

3.yarn安装

$ yarn add axios

3.使用CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

4.使用unpkg CDN:（个人不推荐使用）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

一切都从Hello World开始

这个是本人编写的api接口，在这里将会成为我们第一个部分的实例
api.catci.buzz/io/test
一个极其平常的页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" 
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	crossorigin="anonymous">
</head>
<body>
	<div class="container my-5">
		<div class="text-center">
			<h1 class="display-4 text-center mb-3">Axios全方位解析</h1>
			<button class="btn btn-primary my-3" id="get">GET</button>
			<button class="btn btn-info" id="post">POST</button>
			<button></button>
		</div>
	</div>
	<div id="res"></div>
	<!--以下使用CDN进行引用-->
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		// 在这里写我们的axios代码
	</script>

页面效果
在这里插入图片描述
在script下添加如下代码

// 请求接口
		var oGet = document.getElementById('get')
		var oPost = document.getElementById('post')// 先放着

		oGet.onclick = function(){
			axios({
				method:"get",
				url: "http://api.catci.buzz/io/test",
				params:{
					lang:CSDN
				}
			}).then(res => showOutput(res))	// 成功执行函数
			.catch(err => console.log(err))	// 失败执行函数
		}
		function showOutput(res){
			document.getElementById("res").innerHTML =`
			<div class="card card-body mb-4">
		<h5>Status: ${res.status}</h5>
	</div>

	<div class="card mt-3">
		<div class="card-header">
			Headers
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.headers,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Data
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.data,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Config
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.config,null,2)}</pre>
		</div>
	</div>
			`

页面预览
在这里插入图片描述

Post请求

从上面的实例中我们知道了在Axios中如何发送get请求
我们将会使用JSONplaceholder提供的io接口来写下面的示例代码
script添加如下代码

oPost.onclick = function(){
			axios({
				method:"post",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					title:'Hello World',
					completed:false
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}

没有什么特别难的地方，不再过多讲解

PUT/PATCH请求以及删除请求数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" 
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	crossorigin="anonymous">
</head>
<body>
	<div class="container my-5">
		<div class="text-center">
			<h1 class="display-4 text-center mb-3">Axios全方位解析</h1>
			<button class="btn btn-primary my-3" id="get">GET</button>
			<button class="btn btn-info" id="post">POST</button>
			<button class="btn btn-info" id="put">PUT/PATCH</button>
			<button class="btn btn-warning" id="del">DELETE</button>
		</div>
	</div>
	<div id="res"></div>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		// 请求接口
		var oGet = document.getElementById('get')
		var oPost = document.getElementById('post')
		var oPut = document.getElementById('put')
		var oDel = document.getElementById('del')

		oGet.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					_limit:5
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}
		oPost.onclick = function(){
			axios({
				method:"post",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					title:'Hello World',
					completed:false,
					timeout:5000
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}
		oPut.onclick = function(){
			axios.patch("http://jsonplaceholder.typicode.com/todos/1",{
				title:"Hello World",
				completed:true
			})
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		oDel.onclick = function(){
			axios.delete("http://jsonplaceholder.typicode.com/todos/1")
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		// 数据展示
		function showOutput(res){
			document.getElementById("res").innerHTML =`
			<div class="card card-body mb-4">
		<h5>Status: ${res.status}</h5>
	</div>

	<div class="card mt-3">
		<div class="card-header">
			Headers
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.headers,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Data
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.data,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Config
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.config,null,2)}</pre>
		</div>
	</div>
			`
			
		}
	</script>
</body>
</html>

put返回

{
  "url": "http://jsonplaceholder.typicode.com/todos/1",
  "method": "patch",
  "data": "{\"title\":\"Hello World\",\"completed\":true}",
  "headers": {
    "Accept": "application/json, text/plain, */*",
    "Content-Type": "application/json;charset=utf-8"
  },
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "timeout": 0,
  "xsrfCookieName": "XSRF-TOKEN",
  "xsrfHeaderName": "X-XSRF-TOKEN",
  "maxContentLength": -1
}

delete返回空对象

批量请求

html添加如下代码

<button class="btn" style="background: grey;" id="batch">批量请求</button>
<button class="btn" style="background: grey;" id="headers">Headers</button>
<button class="btn" style="background: grey;" id="transform">TRANSFORM</button>
<button class="btn" style="background: grey;" id="control">ERR-CONTROL</button>
<button class="btn" style="background: grey;" id="cancel">请求取消</button>

Javascript

// 请求接口
		var oGet = document.getElementById('get')
		var oPost = document.getElementById('post')
		var oPut = document.getElementById('put')
		var oDel = document.getElementById('del')
		var oBatch = document.getElementById('batch')
		var oHeaders = document.getElementById('headers')
		var oTransform = document.getElementById('transform')
		var oControl = document.getElementById('control')
		var oCancel = document.getElementById('cancel')
		oGet.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					_limit:5
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}
		oPost.onclick = function(){
			axios({
				method:"post",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					title:'Hello World',
					completed:false,
					timeout:5000
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		oPut.onclick = function(){
			axios.patch("http://jsonplaceholder.typicode.com/todos/1",{
				title:"Hello World",
				completed:true
			})
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		oDel.onclick = function(){
			axios.delete("http://jsonplaceholder.typicode.com/todos/1")
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		oBatch.onclick = function(){
		// axios.all返回一个数组
			axios.all([
				axios.get('http://jsonplaceholder.typicode.com/todos?_limit=5'),
				axios.get('http://jsonplaceholder.typicode.com/posts?_limit=5')
			])
			// then通过索引获取数组内元素
			.then(res => showOutput(res[0]))
			.catch(err => console.error(err))
		}
		// 数据展示
		function showOutput(res){
			document.getElementById("res").innerHTML =`
			<div class="card card-body mb-4">
		<h5>Status: ${res.status}</h5>
	</div>

	<div class="card mt-3">
		<div class="card-header">
			Headers
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.headers,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Data
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.data,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Config
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.config,null,2)}</pre>
		</div>
	</div>
			`
			
		}

自定义请求头

js添加如下代码

oHeaders.onclick = function(){
			axios.post("http://jsonplaceholder.typicode.com/todos",{
				title:"Hello World",
				completed:true
			},{
				headers:{
					"Content-Type":"application/json"
				}
			})
			.then(res => showOutput(res))
			.catch(err => console.error(err))
		}

Transform

oTransform.onclick = function(){
			axios({
				method:"post",
				url:"http://jsonplaceholder.typicode.com/todos",
				data:{
					title:"Hello World"
				}
			})
			.then(res => showOutput(res))
		}

再此基础上我们可以在请求层对响应进行转化

oTransform.onclick = function(){
			// axios({
			// 	method:"post",
			// 	url:"http://jsonplaceholder.typicode.com/todos",
			// 	data:{
			// 		title:"Hello World"
			// 	}
			// })
			// .then(res => showOutput(res))
			axios({
				method:"post",
				url:"http://jsonplaceholder.typicode.com/todos",
				data:{
					title:"Hello World"
				},
				transformResponse: axios.defaults.transformResponse.concat(data => {
					data.title = data.title.toUpperCase()
					return data
				})
			}).then(res => showOutput(res))
		}

Error处理

		oControl.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todoss",
				params:{
					_limit:5
				}
			})
			.then(res => showOutput(res))
			.catch(err => {
				if (err.response){
					console.log(err.response.data)
					console.log(err.response.status)
					console.log(err.response.headers)
				

					if (err.response.status == 404){
						alert('客户端出现错误')
					}else if (err.response.status == 500){
						alert('服务端接口出现问题')
					}
				}else if(err.request){
					console.error(err.request)
				}else{
					console.error(err.message)
				}
			})
		}

请求取消

生成一个token并设置为axios请求参数
https://jwt.io/
javascript添加如下代码

		//定义token
		axios.defaults.headers.common['X-Auth-Token'] = 
		"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
		oCancel.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					cancelToken:axios.CancelToken.source().token,
					_limit:5
				}
			}).then(res => showOutput(res))
			.catch(thrown => {
				if(axios.isCancel(thrown)){
					console.log('request canceld',thrown.message)
				}
			})
		}

请求拦截

Javascript添加如下

// 请求拦截
		axios.interceptors.request.use(config => {
			console.log(`${config.method.toUpperCase()} request sent to ${config.url} at ${new Date()
			.getTime()}`)
			return config
		},error => {return Promise.reject(error)})

总代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" 
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	crossorigin="anonymous">
</head>
<body>
	<div class="container my-5">
		<div class="text-center">
			<h1 class="display-4 text-center mb-3">Axios全方位解析</h1>
			<button class="btn btn-primary my-3" id="get">GET</button>
			<button class="btn btn-info" id="post">POST</button>
			<button class="btn btn-info" id="put">PUT/PATCH</button>
			<button class="btn btn-warning" id="del">DELETE</button>
			<button class="btn" style="background: grey;" id="batch">批量请求</button>
			<button class="btn" style="background: grey;" id="headers">Headers</button>
			<button class="btn" style="background: grey;" id="transform">TRANSFORM</button>
			<button class="btn" style="background: grey;" id="control">ERR-CONTROL</button>
			<button class="btn" style="background: grey;" id="cancel">请求取消</button>
		</div>
	</div>
	<div id="res"></div>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		// 请求接口
		var oGet = document.getElementById('get')
		var oPost = document.getElementById('post')
		var oPut = document.getElementById('put')
		var oDel = document.getElementById('del')
		var oBatch = document.getElementById('batch')
		var oHeaders = document.getElementById('headers')
		var oTransform = document.getElementById('transform')
		var oControl = document.getElementById('control')
		var oCancel = document.getElementById('cancel')
		//定义token
		axios.defaults.headers.common['X-Auth-Token'] = 
		"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"

		oGet.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					_limit:5
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}
		oPost.onclick = function(){
			axios({
				method:"post",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					title:'Hello World',
					completed:false,
					timeout:5000
				}
			}).then(res => showOutput(res))
			.catch(err => console.log(err))
		}
		oPut.onclick = function(){
			axios.patch("http://jsonplaceholder.typicode.com/todos/1",{
				title:"Hello World",
				completed:true
			})
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		oDel.onclick = function(){
			axios.delete("http://jsonplaceholder.typicode.com/todos/1")
			.then(res => showOutput(res))
			.catch(err => console.errer(err))
		}
		oBatch.onclick = function(){
			axios.all([
				axios.get('http://jsonplaceholder.typicode.com/todos?_limit=5'),
				axios.get('http://jsonplaceholder.typicode.com/posts?_limit=5')
			])
			.then(res => showOutput(res[0]))
			.catch(err => console.error(err))
		}
		oHeaders.onclick = function(){
			axios.post("http://jsonplaceholder.typicode.com/todos",{
				title:"Hello World",
				completed:true
			},{
				headers:{
					"Content-Type":"application/json"
				}
			})
			.then(res => showOutput(res))
			.catch(err => console.error(err))
		}
		oTransform.onclick = function(){
			// axios({
			// 	method:"post",
			// 	url:"http://jsonplaceholder.typicode.com/todos",
			// 	data:{
			// 		title:"Hello World"
			// 	}
			// })
			// .then(res => showOutput(res))
			axios({
				method:"post",
				url:"http://jsonplaceholder.typicode.com/todos",
				data:{
					title:"Hello World"
				},
				transformResponse: axios.defaults.transformResponse.concat(data => {
					data.title = data.title.toUpperCase()
					return data
				})
			}).then(res => showOutput(res))
		}
		oControl.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todoss",
				params:{
					_limit:5
				}
			})
			.then(res => showOutput(res))
			.catch(err => {
				if (err.response){
					console.log(err.response.data)
					console.log(err.response.status)
					console.log(err.response.headers)
				

					if (err.response.status == 404){
						alert('客户端出现错误')
					}else if (err.response.status == 500){
						alert('服务端接口出现问题')
					}
				}else if(err.request){
					console.error(err.request)
				}else{
					console.error(err.message)
				}
			})
		}
		oCancel.onclick = function(){
			axios({
				method:"get",
				url: "http://jsonplaceholder.typicode.com/todos",
				params:{
					cancelToken:axios.CancelToken.source().token,
					_limit:5
				}
			}).then(res => showOutput(res))
			.catch(thrown => {
				if(axios.isCancel(thrown)){
					console.log('request canceld',thrown.message)
				}
			})
		}
		// 请求拦截
		axios.interceptors.request.use(config => {
			console.log(`${config.method.toUpperCase()} request sent to ${config.url} at ${new Date()
			.getTime()}`)
			return config
		},error => {return Promise.reject(error)})

		// 数据展示
		function showOutput(res){
			document.getElementById("res").innerHTML =`
			<div class="card card-body mb-4">
		<h5>Status: ${res.status}</h5>
	</div>

	<div class="card mt-3">
		<div class="card-header">
			Headers
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.headers,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Data
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.data,null,2)}</pre>
		</div>
	</div>
	<div class="card mt-3">
		<div class="card-header">
			Config
		</div>
		<div class="card-body">
			<pre>${JSON.stringify(res.config,null,2)}</pre>
		</div>
	</div>
			`
			
		}
	</script>
</body>
</html>
猫兮ぃCatci
关注
【axios】-- 一文带你入门axios
qq_48802092的博客
10-07 1114
axios提供了两种拦截器： 请求拦截器（成功，失败） 响应拦截器（成功，失败） 拦截器的作用： 在网络请求时发起请求 请求响应时对操作进行相应的处理 拦截器的应用场景： 请求拦截器成功时，可以添加网页加载的动画等 响应拦截器成功时，可以进行数据的相应处理
axios实例
Argent_
09-05 1585
axios实例 后端接口地址多个，并且超时时长不一样 的情况下就需要用到 创建实例 可以使用自定义配置新建一个 axios 实例 axios.create([config]) <template> <div class="axios"></div> </template> <script> /* axios实例 后端接口地址...
2021-07-09
qq_37430115的博客
07-09 123
axios的数字精度问题 axios在获得超过一定位数的id时，会丧失精度，最后几位变成0 加入如下代码后解决： import JSONBIG from 'json-bigint'; axios.defaults.transformResponse = [ function (data) { const json = JSONBIG({ storeAsString: true, }); const res = json.pars
axios配置中transformRequest和transformResponse的作用
jiangjunyuan168的博客
11-26 1万+
transformRequest： 作用： 表示允许在向服务器发送前，修改请求数据 使用要求： 1、只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法 2、后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream 用法： transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data; }], transformResponse： 作用： 在传递给 t
如何在unpkg上找到第三方库的分发地址
听海边涛声
07-23 190
如何在unpkg上找到第三方库的分发地址
解决axios获取的返回数据中数字的精度问题
开源共享
08-19 2276
由于前端能够显示的数字最大只有53位，有时候会遇到后端返回的数据中数字过大，超过了前端精度，但可能后端出于某些原因无法更改，要前端处理时。 其实本身接口返回的Response是个json字符串，由于axios默认使用JSON.parse导致精度丢失，我们可以使用第三方库修改axios默认的格式化方法，这里我使用的json-bigint。 import JSONBIG from 'json-bigint'; axios.defaults.transformResponse = [ function
Vue 使用 json-bigint 解决超过16位数字解析精度丢失问题
qq_41015611的博客
08-17 5531
使用bignumber.js 和 json-bigint 解决Vue处理超过16位数字精度丢失问题
transformRequest用来转化请求的格式
duancsdn的博客
06-09 469
request({ url: url, method: ‘POST’, data:data, headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ }, transformRequest : [function (data) { let ret = ‘’ for (let it in data) { ret += encodeURIComponent(it) + ‘=’ + encodeURIComponent(data[it]) +
axios实例继承默认拦截器
09-29
使用axios创建实例时，默认仅通过实例定义的拦截器。有写场景下，需要继承折则axios缺省浏览器，本代码正是为解决此问题而生。
axios实例及封装的方法（1）
weixin_44211097的博客
10-25 529
一、axios的实例 为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？ 引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。 比如axios1是用http状态码确定响应是否正
fastify-axios:将axios http客户端添加到您的fastify实例
05-12
只需将它添加到通过生成的项目 ， ，或register在你的应用程序如下。 您可以通过fastify.axios访问axios实例，该实例可用于通过GET ， POST ， PUT ， DELETE等方法发送HTTP请求。 'use strict' module . exports ...
vant+vue3+axios从0到1(实战，有问题留言)
10-28
"vant+vue3+axios从0到1"的实战教程旨在帮助开发者掌握这三个关键技术的集成与应用，从而构建一个完整的前端应用程序。下面将详细介绍这三者的核心概念、功能及它们之间的协同工作方式。 首先，Vue3是Vue.js框架的...
VUE axios上传图片到七牛的实例代码
08-29
以上就是使用 Vue.js 和 Axios 上传图片到七牛云的实例代码。注意，实际项目中可能需要考虑错误处理、进度显示、多图上传等复杂场景，以及根据七牛云的具体上传策略进行相应调整。此外，为了保证安全性，建议不要在...
axios 返回错误消息
luckydog
06-04 3749
浏览器接口请求失败后数据 浏览器打印结果 解决方法 axios.get('/user/id') .catch(function (error) { if (error.response) { // 请求已发出，但服务器响应的状态码不在 2xx 范围内 console.log(error.response.data); console.log(error.response.status); console.log(error.response.h
在使用axios进行上传文件的坑
shsongtao的博客
06-15 2万+
在进行文件上传后台报错 在使用axios进行文件上传时,后台的grails程序经常或出现不能获取file的情况 No signature of method No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3SecurityContextH...
NuxtServerError connect ECONNREFUSED 127.0.0.1:80 错误解决
热门推荐
风格色的博客
02-26 8万+
错误原因项目结构：我的项目结构是：前后端分离。 前端node + express + nuxt 后端 beego 来自浏览器的请求都经过node, node使用http-proxy-middleware代理所有请求参数为/api的请求。当使用asyncData方法在组件渲染前异步请求数据时，node url parse 去解析你的这个 /api 参数的，然后再传给相应的如 http req
Vue axios封装 实现请求响应拦截
izhaong
05-30 1286
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constructor (baseURL = baseURL) { this.baseURL = baseURL this.queue = {} // 队列中有请求时 显示loado...
Angularjs拦截器
weixin_43996999的博客
07-11 519
本篇文章参考自：https://my.oschina.net/ilivebox/blog/290881 前言： 今天在公司项目中碰到了拦截器这个东西，顾名思义，拦截器就是为了拦截某个东西，项目中的拦截器都是组长封装好的，自己也不懂，所以就问了问度娘，结合网上的讲解，在此总结一下 什么是拦截器？ 顾名思义，拦截器就是为了拦截某一个东西~~~ $httpAngularJS 的 $http 服务允...
Hive transform中的NULL值处理
mirror的专栏
04-10 918
在hive的transform中，输入中 NULL 值会被转换成字符串 '\N'(大写N)，同时输出时 '\N' 会再次被转化为 NULL 所以在transform中，判断某列为NULL实际上应该是判断该列是否等于'\N' 即 # coding:utf-8 import sys for line in sys.stdin: res = line.strip().split('\t...
如何自定义axios实例
最新发布
09-14
在JavaScript中，axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中发起HTTP请求。自定义axios实例通常涉及创建一个axios实例，并对这个实例进行配置以满足特定需求。以下是创建和配置axios实例的基本步骤： 1. 首先，需要安装axios库。如果是在Node.js环境中，可以使用npm或yarn命令安装。在浏览器中则可以通过script标签引入axios的CDN链接。 2. 创建axios实例： ```javascript const axios = require('axios'); // Node.js环境 // 或者在浏览器中引入axios // <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> const instance = axios.create({ baseURL: 'https://api.example.com', // 基础URL timeout: 1000, // 请求超时时间 headers: {'X-Custom-Header': 'foobar'} // 自定义请求头 }); ``` 3. 配置实例。创建实例后，可以根据需要对其添加拦截器，以便在请求发送前或响应接收后执行一些操作。 添加请求拦截器： ```javascript instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么，例如添加token config.headers.Authorization = 'Bearer your-token'; return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); ``` 添加响应拦截器： ```javascript instance.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); ``` 4. 使用自定义的axios实例发起请求： ```javascript instance.get('/users') .then(response => { // 处理成功的响应 console.log(response.data); }) .catch(error => { // 处理错误 console.error(error); }); ``` 自定义axios实例的好处是，可以针对不同的API或不同环境（如开发环境和生产环境）创建不同的配置，提高代码的复用性，同时也可以为特定的HTTP请求提供一些通用的配置和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值