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(三) ...

随机推荐

k8s中负载均衡器【ingress-nginx】部署
在Kubernetes中,服务和Pod的IP地址仅可以在集群网络内部使用,对于集群外的应用是不可见的.为了使外部的应用能够访问集群内的服务,在Kubernetes 目前提供了以下几种方案: Node ...
网络游戏开发-客户端1（开始Hello world）
打开Egret Launcher ,新建一个EUI项目,起名为 EQiPai 这里需要勾选的是socket网络库,game游戏库.如果要面向海外用户的话,建议勾上Facebook的小游戏sdk. 然后 ...
Cutting Sticks UVA - 10003
题文: 见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...
前端知识点总结——jQuery（上）
1.什么是jQuery jQuery: 第三方的极简化的DOM操作的函数库第三方: 下载极简化: 是DOM操作的终极简化: 1. DOM: 增删改查2. 事件绑定:3. 动画效果:4. Ajax DO ...
高精度运算略解在struct中重载运算符
高精度高精度,即高精度算法,属于处理大数字的数学计算方法.在一般的科学计算中,会经常算到小数点后几百位或者更多,当然也可能是几千亿几百亿的大数字. 重载运算符运算符重载,就是对已有的运算符重新进行 ...
[LUOGU1437] 敲砖块
题目描述在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 33 33 7 ...
[Luogu2879][USACO07JAN]区间统计Tallest Cow
题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a p ...
Ubuntu使用中遇到的的一些问题
制作ubuntu启动盘后,U盘只读. ubuntu自带的"启动盘创建器(usb-creator-gtk)"制作启动盘后,U盘只读. 打开ubuntu自带的"磁盘(hard ...
Java SPI、servlet3.0与@HandlesTypes源码分析
关于Java SPI与servlet3.0的应用,这里说的很精炼,链接地址如下. https://blog.csdn.net/pingnanlee/article/details/80940993 以 ...
MFC::Visual studio ？对应VC6-14
VC6VC7: Visual studio.netVC7.1: Visual studio 2003VC8: Visual studio 2005VC9: Visual studio 2008VC10 ...

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