必然会用到的 axios 中自带的工具方法

更新日期: 2020-10-31阅读: 1.5k标签: axios
在 axios 中,使用到了很多基础的工具方法,这些方法我们也可以提炼下,看是否能应用到我们自己的实际项目中


1. 是否是绝对链接

所谓的绝对链接指的是有协议的链接,例如https://, weixin://, file://等,或者只有//开头的链接,都属于绝对链接,其他的则属于相对链接。

/**
 * Determines whether the specified URL is absolute
 *
 * @param {string} url The URL to test
 * @returns {boolean} True if the specified URL is absolute, otherwise false
 */
module.exports = function isAbsoluteURL(url) {
    // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
    // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
    // by any combination of letters, digits, plus, period, or hyphen.
    return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);
};


2. 将 baseURL 和 requestedURL 拼接成一个 URL

这里通常 baseURL 是比较固定的,在写配置时,可以只写 requestedURL 部分,然后再将 baseURL 和 requestedURL 拼接成一个完成的 URL。

在完成这个功能之前,我们首先要实现将一个 url 合法的前后部分拼接起来的方法,这里假定所有的传入都是合法的,是因为在调用该方法前已经做好了判断:

/**
 * Creates a new URL by combining the specified URLs
 *
 * @param {string} baseURL The base URL
 * @param {string} relativeURL The relative URL
 * @returns {string} The combined URL
 */
module.exports = function combineURLs(baseURL, relativeURL) {
    // 将baseURL最后的斜杠和relativeURL最前面的斜杠去掉
    return relativeURL ? baseURL.replace(/\/+$/, "") + "/" + relativeURL.replace(/^\/+/, "") : baseURL;
};

这时,再要拼接 baseURL 和 requestedURL 时,就要判断 baseUrl 是否存在,或者 path 是否是一个绝对链接,只有在 baseURL 存在,且 requestedURL 不是绝对链接时,才将 baseURL 和 requestedURL 拼接到一起:

/**
 * Creates a new URL by combining the baseURL with the requestedURL,
 * only when the requestedURL is not already an absolute URL.
 * If the requestURL is absolute, this function returns the requestedURL untouched.
 *
 * @param {string} baseURL The base URL
 * @param {string} requestedURL Absolute or relative URL to combine
 * @returns {string} The combined full path
 */
module.exports = function buildFullPath(baseURL, requestedURL) {
    if (baseURL && !isAbsoluteURL(requestedURL)) {
        return combineURLs(baseURL, requestedURL);
    }
    return requestedURL;
};

在使用 url 之前,先调用下buildFullPath方法,就可以确定这一定是一个绝对链接(要保证 baseURL 和 requestURL 至少有 1 个是绝对链接)。


3. 迭代执行数据中的每一项

我们有时会对一个 array 类型或者 object 类型的数据进行循环迭代,执行同一个操作,例如编码其中的每一项等。但在不知道数据类型的前提下,我们可以使用下面的这个方法:

/**
 * Iterate over an Array or an Object invoking a function for each item.
 *
 * If `obj` is an Array callback will be called passing
 * the value, index, and complete array for each item.
 *
 * If 'obj' is an Object callback will be called passing
 * the value, key, and complete object for each property.
 *
 * @param {Object|Array} obj The object to iterate
 * @param {Function} fn The callback to invoke for each item
 */
function forEach(obj, fn) {
    // Don't bother if no value provided
    // 如果为空则直接返回
    if (obj === null || typeof obj === "undefined") {
        return;
    }

    // Force an array if not already something iterable
    // 如果既不是array类型,也不是object类型,则将其放到一个数据中
    // 方便进行循环处理
    if (typeof obj !== "object") {
        /*eslint no-param-reassign:0*/
        obj = [obj];
    }

    // 这里isArray采用 Object.prototype.toString.call 进行判断
    // Object.prototype.toString.call(obj) === '[object Array]'
    if (isArray(obj)) {
        // Iterate over array values
        // 迭代数据中的每一项
        for (var i = 0, l = obj.length; i < l; i++) {
            fn.call(null, obj[i], i, obj);
        }
    } else {
        // Iterate over object keys
        // 迭代object类型数据中的每一项
        for (var key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                fn.call(null, obj[key], key, obj);
            }
        }
    }
}


4. 将 object 类型的参数拼接到 url 后面

我们在开发过程中,object 类型的数据操作起来比较方便,但在进行 get 请求时或者需要打开带参数的 URL 时,都需要把 object 类型的数据进行转换。实现这个功能最常见的库就是qs了:

import { stringify } from "qs";

const params = {
    name: "wenzi",
    score: "98",
    company: "tencent",
};

// qs中的stringify自带编码
console.log(stringify(params)); // name=wenzi&score=98&company=tencent

在 axios 中,为了方便进行用户进行配置,这里改为了根据用户传入的数据变换方式来处理数据:

function encode(val) {
    return encodeURIComponent(val).replace(/%3A/gi, ":").replace(/%24/g, "$").replace(/%2C/gi, ",").replace(/%20/g, "+").replace(/%5B/gi, "[").replace(/%5D/gi, "]");
}

/**
 * Build a URL by appending params to the end
 *
 * @param {string} url 要拼接的基本url
 * @param {object} [params] 将要追加的参数
 * @returns {string} 已拼接好的URL
 */
module.exports = function buildURL(url, params, paramsSerializer) {
    /*eslint no-param-reassign:0*/
    // 若没有参数,则不需要拼接,直接返回url接口
    if (!params) {
        return url;
    }

    var serializedParams;
    if (paramsSerializer) {
        // 若用户传入了变换数据的函数,则执行
        serializedParams = paramsSerializer(params);
    } else if (utils.isURLSearchParams(params)) {
        // 若是一个URLSearchParams类型的数据,直接转为string类型
        serializedParams = params.toString();
    } else {
        var parts = [];

        // params是其他类型时
        // 对params进行循环
        utils.forEach(params, function serialize(val, key) {
            if (val === null || typeof val === "undefined") {
                return;
            }

            if (utils.isArray(val)) {
                // 若值是一个数据,则后端可能就是要接收数组格式的数据
                // 这里把key添加一个[]
                key = key + "[]";
            } else {
                // 将val设置为数组,继续循环
                val = [val];
            }

            utils.forEach(val, function parseValue(v) {
                if (utils.isDate(v)) {
                    v = v.toISOString();
                } else if (utils.isObject(v)) {
                    v = JSON.stringify(v);
                }
                parts.push(encode(key) + "=" + encode(v));
            });
        });

        // 取出的所有的参数进行拼接
        serializedParams = parts.join("&");
    }

    if (serializedParams) {
        // 判断url中是否存在hash路径,若存在,则只获取前面的部分
        var hashmarkIndex = url.indexOf("#");
        if (hashmarkIndex !== -1) {
            url = url.slice(0, hashmarkIndex);
        }

        // 拼接
        url += (url.indexOf("?") === -1 ? "?" : "&") + serializedParams;
    }

    return url;
};


5. 总结

这些工具方法虽然是 axios 中的,但我们平时中用到的也比较多,这里提炼出来,也希望能给大家在平时开发中,提供一些帮助。

来自:https://www.xiabingbao.com/post/request/axios-some-utils.html


链接: https://fly63.com/article/detial/10004

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

axios常见传参方式_axios中get/post/put/patch请求

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等

axios-mock-adapter_一个axios调试好用的工具

axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来

vue中axios的使用与封装

分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码

vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳

vue中axios请求的封装

发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

Vue+Typescript中在Vue上挂载axios使用时报错

在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下:这样的话,我们在各个组件中进行请求时

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!