实现自己的axios

最新推荐文章于 2024-07-10 08:49:57 发布
最新推荐文章于 2024-07-10 08:49:57 发布
阅读量840 收藏 2
点赞数
分类专栏： 源码 文章标签： 前端 webpack vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33332184/article/details/121561430
版权

在实践过程中，我们发现axios源码经常使用，今天我们就自己实现一个axios（不包括nodejs）

axios实现get，post实现

  • 新建一个axios目录，在里面新建index.js
    这里我们需要把自己的axios导出，代码如下：
import Axios from './axios'
const axios = new Axios()
export default axios
  • 接下来新建axios.js文件
class Axios {
	constructor() {},
	get(){}，
	post(){}
}
export default Axios

通过以上两步操作，我们能在项目文件（main.js）引入

import axios from './axios'
axios.get('http://localhost:3000/json').then(res => {
  console.log(res)
})

axios.post('http://localhost:3000/data', {
	a: 1,
	b: 2
}).then(res => {
  console.log(res)
})

完善get，post成功请求

通过上面描述，我们已经搭建出基本结构，接下来要实现的就是，如何通过ajax请求，完善get，post方法

  • 继续打开axios/index.js文件，完善get，post方法

/**
get请求
@params
{string} url 请求地址
*/
get(url， params){
	return new Promise(resolve => {
		let xhr = new XMLHttpRequest()
		xhr.onload = function () {
			resolve({
				data: JSON.parse(xhr.responseText),
				status: xhr.status,
				statusText: xhr.statusText
			})
		}
		if(params){
			if(Object.prototype.toString.call(params) === '[object Object]' && Object.keys(configs.params).length > 0){
					url += '?'
					for(let key in params){
						url += key + '='+configs.params[key]+'&'
					}
					var urlGets = url
					url = urlGets.substring(0, urlGets.length - 1)
			}
		}
		xhr.open('get', url, true)
		xhr.send()
	})
}

/**
post请求
@params
{string} url 请求地址
{Object} data 请求数据
*/
post(url, data){
	return new Promise(resolve => {
		let xhr = new XMLHttpRequest()
		xhr.onload = function () {
			resolve({
				data: JSON.parse(xhr.responseText),
				status: xhr.status,
				statusText: xhr.statusText
			})
		}
		xhr.open('post', url, true)
		if(Object.prototype.toString.call(data) === '[object Object]'){
			xhr.send(JSON.stringify(data))
		}
		else{
			xhr.send()
		}
	})
}

通过以上操作，我们在main.js里面就可以用get，post请求了

axios.get('http://localhost:3000/json'),then(res=>{console.log(res)})
axios.post('http://localhost:3000/data',{a: 1, b: 2}),then(res=>{console.log(res)})

完善get，post失败请求

上面只是做了请求成功时状态，请求失败还没有，接下来就完善这一部分功能，完善之后的方法如下：

axios.get('http://localhost:3000/json').then(
	res=>{console.log(res)
}).catch(err =>{
	console.log(err)
})
axios.post('http://localhost:3000/data',{
	a: 1, 
	b: 2
}).then(
	res=>{console.log(res)
}).catch(
	err =>{console.log(err)
})


/**
get请求
@params
{string} url 请求地址
{Object} params get请求数据
*/
get(url, params){
   return new Promise(resolve => {
   	let xhr = new XMLHttpRequest()
   	xhr.onload = function () {
   		resolve({
   			data: JSON.parse(xhr.responseText),
   			status: xhr.status,
   			statusText: xhr.statusText
   		})
   	}
   	if(params){
   			if(Object.prototype.toString.call(params) === '[object Object]' && && Object.keys(configs.params).length > 0){
   				url += '?'
   				for(let key in params){
   					url += key + '='+configs.params[key]+'&'
   				}
   				var urlGets = url
   				url = urlGets.substring(0, urlGets.length - 1)
   			}
   	}
   	xhr.open('get', url, true)
   	xhr.send()
   })
}

/**
post请求
@params
{string} url 请求地址
{Object} data 请求数据
*/
post(url, data){
   return new Promise((resolve, reject) => {
   	let xhr = new XMLHttpRequest()
   	xhr.onload = function () {
   		if(xhs.status == 200 || xhr.status == 304 || xhr.status == 100){
   			resolve({
   				data: JSON.parse(xhr.responseText),
   				status: xhr.status,
   				statusText: xhr.statusText
   			})
   		}
   		else{
   			reject({
   				data: xhr.responseText,
   				status: xhr.status,
   				statusText: xhr.statusText
   			})
   		}
   	}
   	xhr.open('post', url, true)
   	if(Object.prototype.toString.call(data) === '[object Object]'){
   		xhr.send(JSON.stringify(data))
   	}
   	else{
   		xhr.send()
   	}
   })
}

通过以上操作，我们在main.js里面就可以用get，post请求了

axios.get('http://localhost:3000/json'),then(res=>{console.log(res)})
axios.post('http://localhost:3000/data',{a: 1, b: 2}),then(res=>{console.log(res)})

axios.create

通过上面操作，我们完成了axios.get，axios.post请求，但是再使用axios方法中，我们发现还有axios.create方法，实现它的思路如下：

axios/index.js

// ---其他代码
axios.create = function (config) {
	return new Axios(config)
}
// ---其他代码

axios/axios.js

constructor(){
	this.defaults =  = copyObject(config) || {}
}
get(url, config){
	// --- 其他代码
	let configs = mergeConfig(this.defaults, config);
	xhr.open('get', configs.baseURL + url, true)
	//添加header头
	for(let key in configs.headers){
		xhr.setRequestHeader(key,configs.headers[key])
	}
	// --- 其他代码
}
post(url, config){
	// --- 其他代码
	let configs = mergeConfig(this.defaults, config);
	xhr.open('post', configs.baseURL + url, true)
	//添加header头
	for(let key in configs.headers){
		xhr.setRequestHeader(key, configs.headers[key])
	}
	// --- 其他代码
}

这里注意，我们需要把传入的对象进行拷贝，防止对其他数据产生影响

在axios目录下，新建utils文件

// 深拷贝
export function copyObject(orig) {
	if(!orig){
		return {}
	}
	var copy = Object.create(Object.getPrototypeOf(orig));
	copyOwnPropertiesFrom(copy, orig);
	return copy;
}

function copyOwnPropertiesFrom(target, source) {
	Object
		.getOwnPropertyNames(source)
		.forEach(function (propKey) {
			var desc = Object.getOwnPropertyDescriptor(source, propKey);
			Object.defineProperty(target, propKey, desc);
		});
	return target;
}

// 对象合并
export function mergeConfig (obj1, obj2) {
	let target = copyObject(obj1),
		source = copyObject(obj2);
	
	return Object.keys(source).reduce((t,k)=>{
		if(['url','baseURL','method', 'data', 'params'].includes(k)){
			t[k] = source[k]
		}
		if(['headers'].includes(k)){
			t[k] = Object.assign({},source[k],t[k])
		}
		return t;
	},target)
}

通过以上操作，我们可以通过axios.create方法创建axios

let instance = axios.create({
  baseURL: 'http://localhost:3000',
  headers : {
    token : 'x-token-123456'
  }
})
instance.get('http://localhost:3000/json'),then(res=>{console.log(res)})
instance.post('http://localhost:3000/data',{a: 1, b: 2}),then(res=>{console.log(res)})

axios拦截方法

在axios里面，我们一般通过如下方法进行拦截

axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});
axios.interceptors.response.use(function (config) {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

通过以上方法，我们可以猜想，axios.interceptors实现，它应该是在axios里面，通过constructor方法引入的一个属性，类型是一个对象，request，response应该是interceptors对象的两个属性，use我们可以假设它是request，reponse， new Interceptor()的两个方法

  • axios/axios.js
constructor(config) {
		// -- 其他代码
		//拦截器
		this.interceptors = {
			request: new Interceptor(),
			response : new Interceptor()
		}
		// -- 其他代码
}
  • axios目录下新建Interceptor.js文件
export default class Interceptor{
	constructor() {
		this.handlers = []
	}
	use(resolvedHandler, rejectedHandler){
		this.handlers.push({
			resolvedHandler,
			rejectedHandler
		})
	}
}

这里我们设计成数组，是因为可以多次use（axios.interceptors.request.use）

  • 接下来在axios/axios.js里面新建requse，send方法
//request请求
request(config){
	let configs = mergeConfig(this.defaults, config);
	let promise = Promise.resolve(configs)
	//请求拦截器，遍历 interceptors.request 里的处理函数
	let requestHandlers = this.interceptors.request.handlers;
	requestHandlers.forEach(handler => {
		promise = promise.then(handler.resolvedHandler, handler.rejectedHandler)
	})
	// 通过handler.resolvedHandler方法返回配置好的config（
	//axios.interceptors.request.use(config=>{
	  //console.log('请求配置信息：',config);
	  //return config
	//})
//），调用send方法完成请求
	promise = promise.then(this.send)
	
	//相应拦截器，遍历 interceptors.response 里的处理函数
	let responseHandlers = this.interceptors.response.handlers;
	responseHandlers.forEach(handler => {
		promise = promise.then(handler.resolvedHandler, handler.rejectedHandler)
	})
	return promise;
}
  • 将请求逻辑拆出来，命名为send方法
send(configs){
	return new Promise((resolve, reject) => {
		let xhr = new XMLHttpRequest()
		xhr.onload = function () {
			if(xhr.status == 200 || xhr.status == 304 || xhr.status == 100){
				resolve({
					data: JSON.parse(xhr.responseText),
					status: xhr.status,
					statusText: xhr.statusText
				})
			}
			else{
				reject({
					data: xhr.responseText,
					status: xhr.status,
					statusText: xhr.statusText
				})
			}
			
		}
		if(configs.method.toLowerCase() == 'get'){
			var urlGet = configs.baseURL + configs.url
			if(configs.params){
				if(Object.prototype.toString.call(configs.params) === '[object Object]' && Object.keys(configs.params).length > 0){
					urlGet += '?'
					for(let key in configs.params){
						urlGet += key + '='+configs.params[key]+'&'
					}
					var urlGets = urlGet
					urlGet = urlGets.substring(0, urlGets.length - 1)
				}
			}
			xhr.open('get', urlGet, true)
		}
		else{
			xhr.open('post', configs.baseURL + configs.url, true)
		}
		//添加header头
		for(let key in configs.headers){
			xhr.setRequestHeader(key,configs.headers[key])
		}
		if(configs.method.toLowerCase() == 'get') xhr.send()
		if(configs.method.toLowerCase() == 'post') {
			if(Object.prototype.toString.call(configs.data) === '[object Object]'){
				xhr.send(JSON.stringify(configs.data))
			}
			else{
				xhr.send()
			}
		}
	})
}
  • 更改get，post请求方法
get(url, config){
	if(!config){
			config = {}
	}
	config.method = 'get';
	config.url = url;
	return this.request(config);
}
post(url, config){
	if(!config){
			config = {}
	}
	config.method = 'post';
	config.url = url;
	return this.request(config);
}

在项目目录main.js通过如下方法调用

//请求拦截器
axios.interceptors.request.use(config=>{
  //console.log('请求配置信息：',config);
  return config
})

axios.interceptors.request.use(config=>{
  config.headers.token = 'my token';
  config.baseURL='http://localhost:3000'
  return config
})

//响应拦截器
axios.interceptors.response.use(res=>{
  //console.log('请求响应信息',res)
  return res;
})
//
axios.interceptors.response.use(res=>{
  res.msg = 'request is ok ~';
  return res;
})

axios.get('/json', {
  params:{
    a: 1,
    b: 2
  }
}).then(() => {
  //console.log(res)
})

axios.post('/user/auth', {
  data: {
    sign: 'aweyuyuwqueyqwuyeyu'
  }
}).then((res) => {
  console.log(res)
})

axios.js整体代码如下：
axios/axios.js

import {copyObject, mergeConfig} from './utils'
import Interceptor from './Interceptor'
class Axios {
	constructor(config) {
		this.defaults = copyObject(config) || {}
		//拦截器
		this.interceptors = {
			request: new Interceptor(),
			response : new Interceptor()
		}
	}
	get(url, config){
		if(!config){
			config = {}
		}
		config.method = 'get';
		config.url = url;
		return this.request(config);
	}
	post(url, config){
		if(!config){
			config = {}
		}
		config.method = 'post';
		config.url = url;
		return this.request(config);
	}
	//request请求
	request(config){
		let configs = mergeConfig(this.defaults, config);
		let promise = Promise.resolve(configs)
		//请求拦截器，遍历 interceptors.request 里的处理函数
		let requestHandlers = this.interceptors.request.handlers;
		requestHandlers.forEach(handler => {
			promise = promise.then(handler.resolvedHandler, handler.rejectedHandler)
		})
		// 数据请求
		promise = promise.then(this.send)
		
		//相应拦截器，遍历 interceptors.response 里的处理函数
		let responseHandlers = this.interceptors.response.handlers;
		responseHandlers.forEach(handler => {
			promise = promise.then(handler.resolvedHandler, handler.rejectedHandler)
		})
		
		return promise;
	}
	
	// 发送请求
	send(configs){
		return new Promise((resolve, reject) => {
			let xhr = new XMLHttpRequest()
			xhr.onload = function () {
				if(xhr.status == 200 || xhr.status == 304 || xhr.status == 100){
					resolve({
						data: JSON.parse(xhr.responseText),
						status: xhr.status,
						statusText: xhr.statusText
					})
				}
				else{
					reject({
						data: xhr.responseText,
						status: xhr.status,
						statusText: xhr.statusText
					})
				}
				
			}
			if(configs.method.toLowerCase() == 'get'){
				var urlGet = configs.baseURL + configs.url
				if(configs.params){
					if(Object.prototype.toString.call(configs.params) === '[object Object]' && Object.keys(configs.params).length > 0){
						urlGet += '?'
						for(let key in configs.params){
							urlGet += key + '='+configs.params[key]+'&'
						}
						var urlGets = urlGet
						urlGet = urlGets.substring(0, urlGets.length - 1)
					}
				}
				xhr.open('get', urlGet, true)
			}
			else{
				xhr.open('post', configs.baseURL + configs.url, true)
			}
			//添加header头
			for(let key in configs.headers){
				xhr.setRequestHeader(key,configs.headers[key])
			}
			if(configs.method.toLowerCase() == 'get') xhr.send()
			if(configs.method.toLowerCase() == 'post') {
				if(Object.prototype.toString.call(configs.data) === '[object Object]'){
					xhr.send(JSON.stringify(configs.data))
				}
				else{
					xhr.send()
				}
			}
		})
	}
}
export default Axios

运行结果

get请求
在这里插入图片描述
get请求结果
在这里插入图片描述
post请求
在这里插入图片描述
post请求结果
在这里插入图片描述

niuyueyang
关注
专栏目录
【axios】简单的axios实现
代码的魅力，根本走不出来
04-12 135
这个例子中使用了XMLHttpRequest对象来发送请求。这个对象是JavaScript中用来发送HTTP请求的一个内置对象。我们使用了其中的open()、setRequestHeader()、onload()、onerror()和send()方法来控制请求和处理响应。在这个例子中，我们没有实现请求超时、取消请求和其他高级功能，因为这些功能会让这个例子变得更加复杂，而且已经有很多成熟的库实现了这些功能。它接收一个config对象作为参数，其中包含请求的URL、HTTP方法、请求头、请求数据等等。
自定义封装axios
xuziwan562154119的专栏
06-13 274
前言 今天研究了一下公司pc端封装的axios，主要配合element以及js-cookie，自己跟着搞了一遍，在这里记录一下。 代码 import axios from 'axios'; import { Loading } from 'element-ui'; import Cookies from 'js-cokie'; //基于axios基本配置创建实例 const serviece=axios.ceeate({ baseUrl: '', timeOut: 10000.
axios 源码解析：十分钟带你实现一个 mini-axios
最新发布
程序员成长指北
07-10 82
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群原文：https://juejin.cn/post/7388316163578363916整个实现流程分为 5 个大部分：准备测试环境axios 核心请求构建多宿主环境（浏览器 || node）适配思想拦截器的实现原理如何取消请求1、准备基础的测试环境1.1 基于 Koa 准备一个最简单的服务...
自实现微微型axios
qq_44625142的博客
08-17 101
axios准备 准备 在实现前我们需要用json-server搭建一个REST接口，这是大神弄好的一个包，直接用就行了，30s足矣，用来方便测试，可以到npm上看使用:json-server 搭建好之后，我们就可以用它提供的接口来测试我们自己封装的axios是否可行 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
前后端交互的一个简单实现（axios）
m0_61998604的博客
05-08 745
新手小白，前后端交互的一个简单实现
axios实现
lin_fightin的博客
03-05 681
类型定义 import { AxopsInterceptroManager } from './AxiosINterceptoManager' interface AxiosInstace<T = any> { // request方法 (config: AxiosRequestConfig):Promise<AxiosResponse<T>> //T是resolve(v)的v值的定义, interceptors: { re
vue 实现axios拦截、页面跳转和token 验证
10-18
本文主要讲述了如何在Vue项目中整合axios来实现请求拦截、页面跳转以及基于token的验证流程，确保了安全性与用户体验。 ### Vue与axios整合的必要性 Vue.js虽然强大，但本身并不提供HTTP请求的功能。axios作为一个...
ts-axios:TypeScript实现axios
03-31
TypeScript库启动器 一个启动项目，使创建TypeScript库非常容易。 用法 ...cd YOURFOLDERNAME # Run npm install and write your library name when asked....和实现代码格式设置和一致性 使用自动将文档生成并部署到g
vue+axios实现文件下载及vue中使用axios的实例
10-17
下面将详细介绍如何使用 Vue 和 Axios 实现文件下载，以及在 Vue 项目中配置 Axios 的方法。 ### 文件下载流程 1. **接口准备**：首先，你需要与后端开发人员协调，确保他们提供的接口已经正确设置了响应头（`...
vue实现axios图片上传功能
10-16
在Vue项目中，使用axios实现图片上传功能是一个常见的需求。Vue和axios的结合可以方便地处理前后端数据交互，特别是涉及到文件上传时。本篇文章将详细介绍如何在Vue中利用axios和FormData来完成图片上传功能。 首先...
ts-axios:使用TypeScript实现axios
03-30
【ts-axios:使用TypeScript实现axios】 在深入探讨`ts-axios`之前，我们先来了解一下基础背景。`axios`是一个广泛使用的JavaScript库，它用于在浏览器和Node.js环境中发起HTTP请求。它以其易用性、灵活性和丰富的...
实现一个简单的axios封装
李@@的博客
06-28 628
简单实现axios封装 1.创建生产环境地址 （本机地址） .env.development文件 VUE_APP_BASE_URL='/api' 创建开发环境地址（java后台地址） .env.production文件 VUE_APP_BASE_URL='http://106.14.26.32:8080/api' 2.在Axios代理处判断环境，进行相关的操作 module.exports = { publicPath: process.env.NODE_ENV === 'production
自己封装一个简单的axios
qq_20623665的博客
02-20 96
xhr.response或者xhr.responseText可以获取JSON格式数据，转换并改变promise状态，返回成功后的值。并return出去，调用可以使用p可以通过.then或者async await 获取成功后的值。实例静态方法open（‘请求方法’，‘请求地址’）执行体里使用XMLHttpRequest创建实例。创建promise的实例对象。使用es6的promise。监听xhr上的load事件。实例静态方法send发送。
vue的axios的实现
CSH_lucky的博客
08-25 289
一、axios和ajax的区别 axios就是ajax，但是ajax不等于axios，axios只是通过promise实现对ajax的封装，就像jQuery对ajax的封装一样 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 原生ajax function ajax(url){ var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHtt
手写简单实现axios
weixin_43443341的博客
09-03 1116
手写实现简单的axios什么是 axios手写实现创建本地文件demo.htmlnode 服务模拟数据axios实现axios({})axios.get()请求和响应拦截器 什么是 axios 关于 axios 是什么，使用 Vue 开发的同学应该不会陌生，具体的 API 也可以参考axios 中文文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 （这里只针对浏览器的原理进行阐述） 手写实现 创建本地文件 demo.html <button i
axios的实现原理
趟过java，遇见web
12-09 808
axios实现原理
axios是如何实现的（源码解析）
weixin_66128399的博客
02-23 1064
该文件创建了一个axios实例，并且导出，所以我们import axios from 'axios'引入的就是该实例，可以直接使用，不需要再new Axios({...})这样写。从上面的文件可以看出，axios扩展了Axios的原型方法和Axios实例的属性，所以接下来要重点看Axios的类里有什么内容。在阅读源码之前，先大概了解一下axios实例的属性和请求整体流程，带着这些概念，阅读源码可以轻松不少！下图是axios的请求流程，其实相当简单，先了解这个流程，看源码的时候就会有方向。
JS案例：实现一个简易版axios
09-09 888
axios是一个的前端请求工具，其优秀的场景复用性使它可以运行在node环境和浏览器环境，在浏览器环境中使用的是xhr，在node中则是使用http模块，最近在封装一些工具函数，恰好接触到了这一块，于是想分享一下心得，希望对大家有帮助。文章中有一些类型和函数未给出可以在这个工具包中找到功能特性：浏览器环境下，我使用的是fetch而摒弃了xhr的封装，这会使低版本浏览器兼容上有一定缺陷，后续有时间的话可能会加上，node环境下依旧使用的http模块。
封装一个属于自己的axios请求
hfdxmz_3的博客
05-23 311
摘要 　　axios是一个基于promise的HTTP库，可以用于浏览器中进行AJAX请求处理。在项目中，为了实现通用性，封装了一个axios请求。 axios封装 1、配置环境变量 1 2 // 根据不同环境变量选择不同的接口服务器域名 exportconst BASE_URL = process.env.REACT_APP_API; 2、创建axios实例 　　创建axios实例可以根据官方文档进行属于自己的配置，具体属性可以参..
如何实现axios封装
04-08
Axios封装可以采用创建axios实例的方式，对axios请求进行预处理和统一处理，方便后续接口的调用和处理。...以上是axios封装的基本步骤，具体实现可以根据项目需求进行适当调整。希望能够对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值