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

最新推荐文章于 2024-07-23 09:33:23 发布
最新推荐文章于 2024-07-23 09:33:23 发布
阅读量542 收藏
点赞数
文章标签： 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实例及封装的方法（1）
weixin_44211097的博客
10-25 531
一、axios的实例 为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？ 引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。 比如axios1是用http状态码确定响应是否正
axios 源码解析
weixin_43294560的博客
05-13 951
axios请求响应流程： 定义axios类 function Axios(instanceConfig) { //接受默认的配置参数 this.defaults = instanceConfig; //定义请求和响应的拦截器 this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() }; } request 实际发送请求的方法 对用户传
解决axios获取的返回数据中数字的精度问题
开源共享
08-19 2292
由于前端能够显示的数字最大只有53位，有时候会遇到后端返回的数据中数字过大，超过了前端精度，但可能后端出于某些原因无法更改，要前端处理时。 其实本身接口返回的Response是个json字符串，由于axios默认使用JSON.parse导致精度丢失，我们可以使用第三方库修改axios默认的格式化方法，这里我使用的json-bigint。 import JSONBIG from 'json-bigint'; axios.defaults.transformResponse = [ function
如何在unpkg上找到第三方库的分发地址
听海边涛声
07-23 208
如何在unpkg上找到第三方库的分发地址
axios如何发送请求
m0_54008970的博客
08-16 998
如何使用axios发送请求，方式及数据格式问题
Vue 使用 json-bigint 解决超过16位数字解析精度丢失问题
qq_41015611的博客
08-17 5566
使用bignumber.js 和 json-bigint 解决Vue处理超过16位数字精度丢失问题
关于使用axios的一些心得技巧分享
qq_22889599的博客
10-25 789
本文主要跟大家介绍了关于使用axios的一些心得技巧，分享出来供大家参考学习，下面来一起看看详细的介绍： 一、带cookie请求 axios默认是请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决。 二、使post请求发送的是formdata格式数据 首先必须设置请求头 //可以通过这种方式给axios设置的
axios实例继承默认拦截器
09-29
使用axios创建实例时，默认仅通过实例定义的拦截器。有写场景下，需要继承折则axios缺省浏览器，本代码正是为解决此问题而生。
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并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-08 5337
src/service/contactService.js export default { // 添加联系人 insertContactList: { method: "post", url: 'insert' }, // 删除联系人 deleteContactList: { method: "dele...
系列教程之使用Axios跨域请求问题
种麦南山下的博客
06-23 4568
一、安装 $ npm install axios 或： $ bower install axios 或： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 二、引入axios main.js import axios from 'axios' //将axios全局挂载到Vue原型上 //Vue.prototype.$axios = axios //this.axios.
vue axios的transformRequest和transformResponse的QA
beihui1976的博客
07-23 9154
1、他们的值是数组transformRequest和transformResponse值的每一个fn都会被调用且接收两个参数（data, headers）上图中的utils.forEach，axios源码中lib/utils.js有定义，与javascript中的array.forEach有点不同2、transformRequest只能用在 PUT, POST, PATCH ...
使用SpringBoot出现：异常Required request body is missing错误解决，axios中transformResponse:无反应
南方硅人的博客
02-02 3509
1、异常Required request body is missing错误解决 springMvc的新注解：GetMapping 不支持@RequestBody 将GetMapping改为PostMapping解决错误 或者是前端界面使用了get提交方式，改为post提交 2、axios中transformResponse:无反应 axios的transformResponse:不能和po...
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使用
程序员阿甘的博客
02-20 6109
基于XMLHttpRequest实现AJAX的步骤非常繁琐，XMLHttpRequest发送一个HTTP请求至少需要经过如下几个步骤： 1、创建XMLHttpRequest实例xhr 2、调用xhr.open方法，设置HTTP请求方法，HTTP请求URL 3、调用xhr.send方法，发送HTTP请求 另外，XMLHttpRequest实例接收的HTTP响应通常是异步的，所以需要监听readystatechange事件，获取判断xhr.readyState状态值，当状态值为4时，才表示收到完整的异步
封装axios连接
甘乐2333的博客
08-03 236
import axios from "axios"; import qs from "qs" import loading from "../lib/loading/index.js" let vm = loading() const server = axios.create({ // baseURL:"", timeout:5000, withCredentia...
浏览器提示：源映射错误：Error: request failed with status 404 解决办法
徊忆羽菲
03-05 9560
浏览器提示：源映射错误：Error: request failed with status 404 解决办法解决方案 解决方案 删除所引入的js文件中的 //# sourceMappingURL=xxxx.js.map 哪个报错删哪个,注意备份
如何自定义axios实例
最新发布
09-14
自定义axios实例通常涉及创建一个axios实例，并对这个实例进行配置以满足特定需求。以下是创建和配置axios实例的基本步骤： 1. 首先，需要安装axios库。如果是在Node.js环境中，可以使用npm或yarn命令安装。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值