0. 系列文章

项目源码请猛戳这里!!!

1. 前言

在官方axios中，还提供了一个叫做getUri的实例方法，该方法用于在不发送请求的前提下根据传入的请求配置对象返回一个请求的url，示例如下：

const config = {

  baseURL: 'https://www.baidu.com/',

  url: '/user/NLRX',

  params: {

    idClient: 1,

    idTest: 2,

    testString: 'thisIsATest'

  }

}

console.log(axios.getUri(config))

// https://www.baidu.com/user/NLRX?idClient=1&idTest=2&testString=thisIsATest

虽然该方法很少用到，但是为了完整性，我们也要为我们的axios实现该方法。

2. 定义getUri接口类型

在实现getUri方法之前，我们先在src/types/index.ts文件中的Axios接口中为该方法添加接口定义，如下：

export interface Axios {

  // 新增

  getUri: (config?: AxiosRequestConfig) => string;

}

3. 实现getUri方法

定义好接口后，我们就在src/core/Axios.ts文件中为Axios类添加getUri实例方法，如下：

import dispatchRequest, { transformUrl } from "./dispatchRequest";

getUri(config?: AxiosRequestConfig): string {

  config = mergeConfig(this.defaults, config);

  return transformUrl(config);

}

OK，getUri方法就实现好了，接下来我们就编写demo来测试下效果。

4. demo编写

在 examples 目录下创建 getUri目录，在 getUri目录下创建 index.html:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>getUri demo</title>

  </head>

  <body>

    <script src="/__build__/getUri.js"></script>

  </body>

</html>

接着再创建 app.ts 作为入口文件：

import axios from "../../src/axios";

const config = {

  baseURL: "https://www.baidu.com/",

  url: "/user/NLRX",

  params: {

    idClient: 1,

    idTest: 2,

    testString: "thisIsATest"

  }

};

console.log(axios.getUri(config));

本demo由于没有发送请求，故不需要在服务端添加路由接口，只需观察浏览器控制台打印结果即可。

最后在根目录下的index.html中加上启动该demo的入口：

<li><a href="examples/getUri">getUri</a></li>

OK,我们在命令行中执行：

# 同时开启客户端和服务端

npm run server | npm start

接着我们打开 chrome 浏览器，访问 http://localhost:8000/ 即可访问我们的 demo 了，我们点击 getUri，然后打开浏览器F12控制台，可以看到请求的url已经打印出来了。

OK，以上就是getUri方法的实现。

（完）

使用Typescript重构axios(三十)——添加axios.getUri方法的更多相关文章

使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(三十二)——写在最后面（总结）
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
k.tt 研究下生成的逻辑代码：从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建
更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...
网站开发进阶(三十六)String.getBytes()方法中的中文编码问题
String.getBytes()方法中的中文编码问题 String的getBytes()方法是得到一个系统默认的编码格式的字节数组. getBytes("utf-8")得到一个U ...
使用Typescript重构axios(二十六)——添加HTTP授权auth属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十九)——添加baseURL
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(三)——实现基础功能：处理get请求url参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(十)——异常处理：增强版
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

随机推荐

设计模式---结构型模式之适配器模式(Adapter Pattern)
适配器模式定义将一个类的接口,转换成客户期望的另外一个接口.适配器让原本接口不兼容的类可以合作无间. 适配器模式主要有两种类型:对象适配器和类适配器. 在详细解释这两种类型时,解释部分重要角色.生活 ...
cocos2dx 3.2 内存管理
一.引用计数(cocos2d-x3.2的Node类中用到) 概念:记录当前对象被引用的次数.当次数为0时释放. 1 . retain 与 release 每调用一次retain()使计数+1 每调用 ...
EasyExcel 轻松灵活读取Excel内容
写在前面 Java 后端程序员应该会遇到读取 Excel 信息到 DB 等相关需求,脑海中可能突然间想起 Apache POI 这个技术解决方案,但是当 Excel 的数据量非常大的时候,你也许发现, ...
安装VMware Tools显示灰色正确解决办法
首先问题如下: 解决办法如下:1.关闭虚拟机: 2.在虚拟机设置分别设置CD/DVD.CD/DVD2和软盘为自动检测三个步骤: 3.再重启虚拟机,灰色字即点亮. 大功告成,如果解决了你的问题,点个赞鼓 ...
机器学习：weka源码在eclipse的配置和异常VerifyError的解决
今天把weka源码导入eclipse,打算学习下weka源码,遇到一些问题,网上资料不足,自己总结下,希望为后来人铺路. 1)新建java项目,命名weka3-6 2)把weka-src.jar解压, ...
Ubuntu PHP安装bcmath模块
1.sudo apt-get install php-bcmath ,安装之后: 2.运行:php -i | grep "php.ini",找到php的配置文件: 加入代码: ex ...
[Luogu3070][USACO13JAN]岛游记Island Travels
题目描述 Farmer John has taken the cows to a vacation out on the ocean! The cows are living on N (1 < ...
Rancher 2.1平台搭建及使用
一.概述 1.1.什么是Rancher Rancher是一套容器管理平台,它可以帮助组织在生产环境中轻松快捷的部署和管理容器. Rancher可以轻松地管理各种环境的Kubernetes,满足IT需求 ...
【Java基础】谈谈集合.CopyOnWriteArrayList
目录实现原理遍历时不用加锁的原因 CopyOnWriteArrayLis的缺点使用场景总结参考本篇博客介绍CopyOnWriteArrayList类,读完本博客你将会了解: 什么是COW机 ...
21.Nginx代理缓存
1.环境准备操作系统应用服务外网地址内网地址 CentOS7.6 LB01 10.0.0.5 172.16.1.5 CentOS7.6 Web01 10.0.0.7 172.16.1.7 2. ...

使用Typescript重构axios(三十)——添加axios.getUri方法