手写Axios源码——（三）

最新推荐文章于 2024-04-11 02:05:44 发布
最新推荐文章于 2024-04-11 02:05:44 发布
阅读量202 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44746132/article/details/108990461
版权
手写Axios源码 - 三

实现defaults默认配置项合并 + 请求响应转化 + cancelToken请求取消

  1. 实现defaults默认配置项合并:
    默认配置的合并主要做一些common的headers的配置,将这些全局的默认配置合并到每个请求的headers里面去进行发送：
// 在Axios.ts文件中处理

// 设定axios请求默认参数:
// 这个默认配置的axios参数将会和传递进来的配置参数进行合并
let defaults: AxiosRequestConfig = {
  method: 'get',
  timeout: 0,
  headers: {
    common: {  // 针对所有的请求生效
      name: "requestName",
      accept: "application/json"
    }
  },
  // 转换请求和转换响应, 这个需要放到axios请求的配置中去，这里只是调试时的放置
  transformRequest: (data: any, headers: any) => {
    headers['common']['content-type'] = 'application/json';
    return JSON.stringify(data)
  },
  transformResponse: (response: any) => {
    return response.data;
  }
}
// ....
let getStyleMethods = ['get', 'head', 'delete', 'options'];  // get风格的请求
getStyleMethods.forEach((method: string) => {
  defaults.headers![method] = {};
})
let postStyleMethods = ['put', 'post', 'patch'];  // post风格的请求
postStyleMethods.forEach((method: string) => {
  defaults.headers![method] = {
    'content-type': 'application/json' // 请求头格式`
  }
})
let allMethods = [...getStyleMethods, ...postStyleMethods];

export default class Axios<T> {
	request(config: AxiosRequestConfig): Promise<AxiosRequestConfig | AxiosResponse<T>> {
		// ...
		// ----合并默认配置项: 这里只是简单的合并处理
    	config.headers = Object.assign(this.defaults.headers, config.headers)
    	// ...
	}
	dispatchRequest<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
		// ....
		// 发送请求前判断是否存在header值:
      	if (headers) {
        	for (let key in headers) {
          	// common表示所有的请求方法都生效，或者说key是一个方法名, 此时这些共有的默认配置就需要单独设置到headers上
          	if (key === "common" || allMethods.includes(key)) {
            	if (key === "common" || key === config.method) {
              		for (let key2 in headers[key]) {
                		request.setRequestHeader(key2, headers[key][key2])
              		}
            	}
          	} else {
            	request.setRequestHeader(key, headers[key])
          	}
        }
      }
      // ....
	}
}
  1. 转化请求响应:
    转化请求响应就是在配置中添加两个请求响应的转化方法，在请求发送之前将请求的headers和data做一些处理，在响应时调用响应转化对响应内容做一些转化处理:
// 修改请求配置类型： types.ts文件
export interface AxiosRequestConfig {
  url?: string;
  method?: Methods;
  params?: any;
  headers?: Record<string, any>;
  data?: Record<string, any>;
  timeout?: number,
  transformRequest?: (data: any, headers: any) => any;  // 转换请求和转换响应
  transformResponse?: (data: any) => any;
}

// 在Axios.ts中的相应位置执行该方法:
request(config: AxiosRequestConfig): Promise<AxiosRequestConfig | AxiosResponse<T>> {
	// ...
	// --- 执行请求转换:
    if (config.transformRequest && config.data) {
      config.data = config.transformRequest(config.data, config.headers)
    } else if (config.data && this.defaults.transformRequest) {
      config.data = this.defaults.transformRequest(config.data, config.headers)
    }
	// ...
}
dispatchRequest<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
	// ...
	request.onreadystatechange = function () {
        // 指定状态变更监听函数
        if (request.readyState === 4) {
          if (request.status >= 200 && request.status < 300) {
            let response: AxiosResponse<T> = {
              data: request.response ? request.response : request.responseText,
              status: request.status,
              statusText: request.statusText,
              headers: parseHeader(request.getAllResponseHeaders()),
              config,
              request
            }
            // -- 处理响应响应转换:
            if (config.transformResponse) {
              response = config.transformResponse(response);
            }
            resolve(response)
          } else {
            reject(`Error: Request failed with status code ${request.status}`)
          }
        }
      }
	// ...
}
  1. cancelToken可以在发送请求的中途取消请求， 主要通过一个Promise实现在特定时候出发request.abort()方法取消请求:
// 新建cancel.ts文件实现CancelToken和Cancel类:
export class Cancel{
  messgae: string;
  constructor(message: string) {
    this.messgae = message;
  }
}
// 该方法用于判断当前的请求错误是否是取消请求产生的
export function isCancel(error: any) {
  return error instanceof Cancel;
}
export class CancelToken {
  public resolve: any;
  source() {
    let that = this;
    return {
      token: new Promise(function (resolve) {
        that.resolve = resolve;
      }),
      cancel: (message: string) => {  // 通过调用cancel方法将token中的promise resolve掉，使得在promise之后的then中的取消请求得以执行
        that.resolve(new Cancel(message))
      }
    }
  }
}

// 在Axios.ts文件中添加处理:
dispatchRequest<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
	// ...
	if (config.cancelToken) {
        config.cancelToken.then((message: string) => {
          request.abort(); // 取消请求，这里的cancleToken就是前面那个promise
          reject(message)
        })
      }
	// ...
}

// 在index.ts文件的axios实例上添加CancelToken和isCancel属性:
import { isCancel, CancelToken } from "./cancel"
// ... 
axios.CancelToken = new CancelToken();
axios.isCancel = isCancel;
// ...

至此， 一款简易版的axios就实现得差不多了，文章最后附上Axios.ts文件得完整代码，其余文件均变动不大，大家可以自行添加:

import { AxiosRequestConfig, AxiosResponse } from "./types"
import AxiosInterceptorManager, { Interceptor } from "./AxiosInterceptorManager"
import qs from "qs";
import parseHeader from "parse-headers";
let defaults: AxiosRequestConfig = {
  method: 'get',
  timeout: 0,
  headers: {
    common: {
      name: "requestName",
      accept: "application/json"
    }
  },
  transformRequest: (data: any, headers: any) => {
    headers['common']['content-type'] = 'application/json';
    return JSON.stringify(data)
  },
  transformResponse: (response: any) => {
    return response.data;
  }
}
let getStyleMethods = ['get', 'head', 'delete', 'options'];
getStyleMethods.forEach((method: string) => {
  defaults.headers![method] = {};
})
let postStyleMethods = ['put', 'post', 'patch'];
postStyleMethods.forEach((method: string) => {
  defaults.headers![method] = {
    'content-type': 'application/json' 
  }
})
let allMethods = [...getStyleMethods, ...postStyleMethods]
export default class Axios<T> {
  public defaults: AxiosRequestConfig = defaults;
  public interceptors = {
    request: new AxiosInterceptorManager<AxiosRequestConfig>(),
    response: new AxiosInterceptorManager<AxiosResponse<T>>()
  }
  request(config: AxiosRequestConfig): Promise<AxiosRequestConfig | AxiosResponse<T>> {
    config.headers = Object.assign(this.defaults.headers, config.headers)
    if (config.transformRequest && config.data) {
      config.data = config.transformRequest(config.data, config.headers)
    } else if (config.data && this.defaults.transformRequest) {
      config.data = this.defaults.transformRequest(config.data, config.headers)
    }
    const chain: Array<Interceptor<AxiosRequestConfig> | Interceptor<AxiosResponse<T>>> = [{
      onFulfilled: this.dispatchRequest,
      onRejected: (error: any) => error
    }]
    this.interceptors.request.interceptors.forEach((interceptor: Interceptor<AxiosRequestConfig> | null) => {
      interceptor && chain.unshift(interceptor)
    })
    this.interceptors.response.interceptors.forEach((interceptor: Interceptor<AxiosResponse<T>> | null) => {
      interceptor && chain.push(interceptor)
    })
    let promise: any = Promise.resolve(config);
    while (chain.length) {
      const { onFulfilled, onRejected } = chain.shift()!;
      promise = promise.then(onFulfilled, onRejected)
    }
    return promise;
  }
  dispatchRequest<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return new Promise<AxiosResponse<T>>(function (resolve, reject) {
      let { method, url, params, headers, data, timeout } = config;
      let request = new XMLHttpRequest();
      if (params) {
        params = qs.stringify(params);
        url += ((url!.indexOf('?') > 0 ? '&' : '?') + params);
      }
      request.open(method!, url!, true);
      request.responseType = "json";
      request.onreadystatechange = function () {
        if (request.readyState === 4) {
          if (request.status >= 200 && request.status < 300) {
            let response: AxiosResponse<T> = {
              data: request.response ? request.response : request.responseText,
              status: request.status,
              statusText: request.statusText,
              headers: parseHeader(request.getAllResponseHeaders()),
              config,
              request
            }
            if (config.transformResponse) {
              response = config.transformResponse(response);
            }
            resolve(response)
          } else {
            reject(`Error: Request failed with status code ${request.status}`)
          }
        }
      }
      if (headers) {
        for (let key in headers) {
          if (key === "common" || allMethods.includes(key)) {
            if (key === "common" || key === config.method) {
              for (let key2 in headers[key]) {
                request.setRequestHeader(key2, headers[key][key2])
              }
            }
          } else {
            request.setRequestHeader(key, headers[key])
          }
        }
      }
      let body: string | null = null;
      if (data) {
        body = JSON.stringify(data)
      }
      request.onerror = function () {
        reject('net::ERR_INTERNET_DISCONNECTED');
      }
      if (timeout) {
        request.timeout = timeout;
        request.ontimeout = function () {
          reject("Error: timeout~~")
        }
      }
      if (config.cancelToken) {
        config.cancelToken.then((message: string) => {
          request.abort();
          reject(message)
        })
      }
      request.send(body);
    })
  }
}
一树梨花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写一个axios
weixin_44457030的博客
02-21 550
# 手写一个axios
手写axios核心原理，再也不怕面试官问我axios原理
weixin_43964148的博客
10-19 1602
手写axios核心原理，再也不怕面试官问我axios原理 手写axios核心原理手写axios核心原理，再也不怕面试官问我axios原理手写axios核心原理一、axios简介axios...
手写axios源码
weixin_43294560的博客
04-03 243
axios发送请求大体流程: axios是通过request方法来实现发送请求的 request方法内部又是通过调用dispatchRequest来实现最终请求的发送 dispatchRequest内部调用adapter适配器来确定是xhr发送(前端)还是http发送(node环境) 最终的结果使用Promise从后往前返回 创建axios结构： 实现实例的defaults属性、intercepter拦截器、request、post、get请求结构 //创建Axios类 function Axio
手写Axios源码——（一）
qq_44746132的博客
10-08 346
Axios (一) axios应该是目前最为常用的前端ajax请求框架， 此次将分四天实现手写Axios源码 第一天: 实现基础极简版axios 创建基础类型: types.ts文件: // 定义请求方法的类型 export type Methods = 'GET' | 'POST' | 'get' | 'post' | 'put' | 'PUT' | 'delete' | 'DELETE' | 'options' | 'OPTIONS' // 定义axios请求的配置类型，及 axios({})方
手写axios
张三军的博客
02-10 537
//创建Axios类 function Axios(config) { this.defaults = config; //添加defaults默认属性 this.interceptors = { //添加拦截器属性 request: new InterceptorManager(), //添加管理存储拦截器中方法的实例 response: new InterceptorManager() } } //拦截器管理类 function Interce
axios源码解析，含有备注
02-21
本文将深入探讨 Axios 的源码，解析其核心功能和工作原理，帮助开发者更好地理解和使用这一强大的库。 首先，Axios 的核心特性包括支持浏览器和 Node.js，自动转换 JSON 数据，支持拦截请求和响应，以及错误处理...
Axios.js源码文件
05-09
Axios.js是一个非常流行的JavaScript库，它主要用于在Web应用程序中执行HTTP请求，特别是在现代前端开发中，它极大地简化了...通过研究和理解Axios.js的源码，可以进一步提升你对JavaScript异步编程和HTTP通信的理解。
study-library-axios:Axios源码分析
03-23
本项目“study-library-axios”旨在深入解析 Axios 的源码，帮助开发者理解其内部工作原理，提升对网络请求处理和Promise机制的理解。 Axios 的主要特性包括： 1. **基于Promise的API**：Axios 使用 Promise API，...
ASP.NET源码——[聊天留言]最简单无刷新聊天室.zip
10-10
这个压缩包中的"ASP.NET源码——[聊天留言]最简单无刷新聊天室.zip"提供了实现一个基本无刷新聊天室的源代码，让我们来详细探讨一下相关知识点。 1. **ASP.NET MVC或Web Forms**: 首先，我们需要确定这个项目是基于...
vue-axios + vue3-axios Axiso解决跨域访问完整源码
02-16
Vue-axios 和 vue3-axios 是 Vue.js 框架与 Axios 集成的插件，使得在 Vue 组件中使用 Axios 更加方便。Vue-axios 主要针对 Vue2，而 vue3-axios 顾名思义，是为了配合 Vue3 的新特性和 API 设计的。 在 Vue 应用中...
my-axios:用typescript编写一个简单的axios库
04-09
我的轴 用typescript编写的一个简易的仿axios库 NPM脚本 npm t ：运行测试套件 npm start ：以监视模式运行npm run build npm run test:watch ：以运行测试套件 npm run test:prod ：运行linting并生成覆盖率 npm run build ：生成包和类型，创建文档 npm run lint ：Lints代码 npm run commit ：使用传统的提交样式提交（如果没有，会告诉您使用它 :winking_face: ）
axios-ts：使用ts重构axios
02-24
TypeScript库启动器 一个启动项目，使创建TypeScript库非常容易。 用法 git clone https://github.com/alexjoverm/typescript-library-starter.git YOURFOLDERNAME cd YOURFOLDERNAME # Run npm install and write your library name when asked. That's all! npm install 开始编码！ package.json和入口文件已经为您设置好了，因此不必担心链接到您的主文件，键入内容等。只需保留这些文件的名称相同即可。 特征 调零。 运行npm install后，将为您npm install东西 :winking_face: 和多个优化捆绑包的 使用测试，报道和交互式观看模式 和实现代码格式化和一致性 使用自动将文档生成并部署到gh
手写一个简易的axios
qq_54684701的博客
09-09 658
手写一个简易的axios 我们知道，axios是一个经过封装的AJAX库，简化了AJAX繁琐的使用步骤，让我们能够更快地发送axios请求，其实，axios的核心封装并不复杂，我们完全可以自己封装一个简单的axios。 axios的源码简析 axios的核心是一个Axios对象和一个axios函数，axios本身是一个函数，并不是Axios的实例化，但是它具有Axios这个对象上的所有方法，所以axios不是Axios函数的实例化，但在效果上axios具有Axios的实例的全部功能，因为Axios对象上的全
手写简易版axios
Beauty_zhang666的博客
05-24 776
文章目录axios的调用-index.htmlmyaxios.js实现axios和axios[method]带拦截器的调用- index.htmlaxios实现拦截器完整代码链接 axios的调用-index.html axios的调用有不同的形式，01. axios(config) 02. axios.method(url, data? , config? ) 要实现一个函数方法同时拥有属性，以下实现了一个工具类utils.extend <script type="text/javascrip
手写简单实现axios
weixin_43443341的博客
09-03 911
手写实现简单的axios什么是 axios手写实现创建本地文件demo.htmlnode 服务模拟数据axios实现axios({})axios.get()请求和响应拦截器 什么是 axios 关于 axios 是什么，使用 Vue 开发的同学应该不会陌生，具体的 API 也可以参考axios 中文文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 （这里只针对浏览器的原理进行阐述） 手写实现 创建本地文件 demo.html <button i
手写Axios源码——（二）
qq_44746132的博客
10-09 300
手写Axios源码二: 处理post类请求和串通拦截器 1. 添加POST请求 post请求和get请求再处理上一个比较大的区别就是需要处理请求的data数据，仅需要再昨天代码的dispatchRequest()方法的基础上添加如下代码即可: // ... (这里只写出有变动的部分: dispatchRequest方法， 之后会将今天处理的完整的代码放到最后) // 解构出data数据: let { method, url, params, headers, data } = config; // ..
手写axios核心原理，再也不怕面试官问我axios原理，2024年最新CSS外边距塌陷问题
最新发布
2401_83740189的博客
04-11 447
)// 工具方法，实现b的方法或属性混入a;// 方法也要混入进去} else {// 最终导出axios的方法-》即实例的request方法// 混入方法， 处理axios的request方法，使之拥有get,post…方法return req;// 得到最后的全局变量axios四、请求和响应拦截器我们先看下拦截器的使用// 添加请求拦截器// 在发送请求之前做些什么// 对请求错误做些什么});// 添加响应拦截器// 对响应数据做点什么。
手写Axios核心原理
webyouxuan的博客
12-03 1259
戳蓝字"Web前端严选"关注我们哦！Axios是一个基于promise的HTTP库，它能够自动判断当前环境，自由切换在浏览器和 node.js环境中。如果是浏览器，就会基...
vue3 axios源码
01-18
vue3 axios源码是指Vue.js 3版本中与axios相关的源代码。在Vue.js 3中，axios是一个常用的HTTP客户端库，用于在浏览器和Node.js中发起HTTP请求。它提供了许多强大的功能，例如拦截请求和响应、转换请求和响应数据等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值