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/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 httpMethod(url, data, config) {
return this.request(mergeConfig(config || {}, {
method: method,
headers: isForm ? {
'Content-Type': 'multipart/form-data'
} : {},
url: url,
data: data
}));
};
}
Axios.prototype[method] = generateHTTPMethod();
Axios.prototype[method + 'Form'] = generateHTTPMethod(true);
}
});
/* axios/lib/utils.js */
// forEach函数
function forEach(obj, fn) {
if (obj === null || typeof obj === undefined) {
return;
}
if (typeof obj !== 'object') {
obj = [obj];
}
if (Array.isArray(obj)) {
for (var i = 0; i < obj.length; i++) {
fn.call(null, obj[i], i, obj);
}
} else {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
fn.call(null, obj[key], key, obj);
}
}
}
}
作者大大用了forEach这个方法,巧妙的写了Axios.prototype.get、Axios.prototype.post等原型方法,那么axios()为什么能触发?axios为什么会有get、post等属性且axios.get()也能触发呢?代码如下:
/* axios/lib/axios.js */
function createInstance(defaultConfig) {
// 生成实例对象
var context = new Axios(defaultConfig);
// 通过bind方法让instance等同于Axios.prototype.request,且执行时的this指向当前的实例对象
var instance = bind(Axios.prototype.request, context);
// 将Axios.prototype原型上的方法作为instance的属性, 且方法中的this指向当前的实例对象
utils.extend(instance, Axios.request, context);
// 将该实例对象的defaults、interceptors属性作为instance的属性
utils.extend(instance, context);
instace.cteate = function (instanceConfig) {
// 合并属性,因此新的实例也拥有默认实例设置过的属性
return createInstance(mergeConfig(defaultConfig, instanceConfig));
}
// 返回实例对象
return instance;
}
// import axios from 'axios'中axios便是这个变量
var axios = createInstance(defaultConfig);
/* axios/lib/utils.js */
// 从上述代码中,发现bind和extends起到的作用非常关键
// bind函数
function bind(fn, thisArg) {
return function wrap() {
var args = new Array(arguments.length);
for (var i = 0l i < arguments.length; i++) {
args[i] = arguments[i];
}
fn.apply(thisArg, args);
}
}
// extends函数
function extend(a, b, thisArg) {
forEach(b, function assignValue(val, key) {
if (thisArg && typeof val === 'function') {
a[key] = bind(val, thisArg);
} else {
a[key] = val;
}
});
return a;
}
最后附上axios官方文档: https://axios-http.com/
在日常 Coding 中,码农们肯定少不了对数组的操作,其中很常用的一个操作就是对数组进行遍历,查看数组中的元素,然后一顿操作猛如虎。今天暂且简单地说说在 JavaScript 中 forEach。
克隆项目代码到本地(git应该都要会哈,现在源码几乎都会放github上,会git才方便,不会的可以自学一下哦,不会的也没关系,gitHub上也提供直接下载的链接);打开微信开发者工具;
随着这些模块逐渐完善, Nodejs 在服务端的使用场景也越来越丰富,如果你仅仅是因为JS 这个后缀而注意到它的话, 那么我希望你能暂停脚步,好好了解一下这门年轻的语言,相信它会给你带来惊喜
在 Vue 内部,有一段这样的代码:上面5个函数的作用是在Vue的原型上面挂载方法。initMixin 函数;可以看到在 initMixin 方法中,实现了一系列的初始化操作,包括生命周期流程以及响应式系统流程的启动
nextTick的使用:vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。
React更新的方式有三种:(1)ReactDOM.render() || hydrate(ReactDOMServer渲染)(2)setState(3)forceUpdate;接下来,我们就来看下ReactDOM.render()源码
在React中,为防止某个update因为优先级的原因一直被打断而未能执行。React会设置一个ExpirationTime,当时间到了ExpirationTime的时候,如果某个update还未执行的话,React将会强制执行该update,这就是ExpirationTime的作用。
算法对于前端工程师来说总有一层神秘色彩,这篇文章通过解读V8源码,带你探索 Array.prototype.sort 函数下的算法实现。来,先把你用过的和听说过的排序算法都列出来:
extend是jQuery中一个比较核心的代码,如果有查看jQuery的源码的话,就会发现jQuery在多处调用了extend方法。作用:对任意对象进行扩;’扩展某个实例对象
state也就是vuex里的值,也即是整个vuex的状态,而strict和state的设置有关,如果设置strict为true,那么不能直接修改state里的值,只能通过mutation来设置
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!