如何理解axios源码中请求方法别名的具体实现原理？

2026-05-22 13:031阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计543个文字，预计阅读时间需要3分钟。

Axios提供了多种创建请求的方式，方便快捷，以下是一些常见的方法：

1. `axios(config)`

2.`axios.get(url[, config])`

3.`axios.post(url[, data[, config]])`

4.`axios.delete(url[, config])`

5.`axios.put(url[, data[, config]])`

6.`axios.patch(url[, data[, config]])`

代码示例：

javascript// 使用axios直接发送请求axios({ method: 'get', url: 'https://api.example.com/data'});

// 使用axios的get方法axios.get('https://api.example.com/data');

// 使用axios的post方法axios.post('https://api.example.com/data', { // 请求体数据});

// 使用axios的delete方法axios.delete('https://api.example.com/data');

// 使用axios的put方法axios.put('https://api.example.com/data', { // 请求体数据});

// 使用axios的patch方法axios.patch('https://api.example.com/data', { // 请求体数据});

axios中的创建请求方式很多，比如axios(url)，axios.get(url)，axios.post(url)，axios.delete(url)，方便快捷的api设计让axios火得一塌糊涂。

先列一下所有请求方法，代码如下：

1. axios(config) || axios(url[, config]) 2. axios.request(config)（实际上axios.request(url)和axios.request(url[, config])也是可以运行的，其d.ts可能写得有点问题，会给错误提示，因此暂时不考虑） 3. axios.get(url[, config]) 4. axios.head(url[, config]) 5. axios.options(url[, config]) 6. axios.post(url[, data[, config]]) 7. axios.put(url[, data[, config]]) 8. axios.patch(url[, data[, config]]) 9. axios.postForm(url[, data[, config]]) 10. axios.putForm(url[, data[, config]]) 11. axios.patchForm(url[, data[, config]]) 其中9、10、11是新特性，文档中也没有说明，其实就是在headers中多加上'Content-Type': 'multipart/form-data'。
这个有个问题就是axios.post在config.data传递参数时，会被忽略掉，
而是直接拿第二个参数data，axios.post(url, null, {data: FormData})这样写也是有可能的，特别是对于记不清楚api的我来说，所以建议作者大大从data: data 改成 data: data || config.data。
emm，完美~

先下结论，无论使用任何请求方法，最终都是调用Axios.prototype.request这个方法。

Axios构造函数的核心代码如下：

/* axios/lib/core/Axios.js */ // Axios构造函数 function Axios(defaultConfig) { this.defaults = defaultConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() } } // Axios原型上的request方法 Axios.prototype.request = function(configOrUrl, config) { ... ... ... } // Axios原型上的['delete', 'get', 'head', 'options']四种方法 utils.forEach(['delete', 'get', 'head', 'options'], function(method) { Axios.prototype[method] = function(url, config) { return this.request(mergeConfig(config || {}, { method: method, url: url, data: (config || {}).data })); } }); // Axios原型上的['post', 'put', 'patch']三种方法 utils.forEach(['post', 'put', 'patch'], function(method) { Axios.prototype[method] = function(url, data, config) { function generateHTTPMethod(isForm) { return function axios-http.com/

标签：别名实现 axio