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

随机推荐

vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
jQuery插件编写学习中遇见的问题--attr prop
个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...
jmeter从获取token开始设计接口
用自己实习时候的一个项目来实现一下获取token的接口测试以登录dmp的学科列表为例子: 从登录开始,打开开发者选项点击登录在开发者窗口中network xhr Fildder中,看登录时的请求 ...
C#的FTP服务器源代码
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
【TencentOS tiny】深度源码分析（8）——软件定时器
软件定时器的基本概念 TencentOS tiny 的软件定时器是由操作系统提供的一类系统接口,它构建在硬件定时器基础之上,使系统能够提供不受硬件定时器资源限制的定时器服务,本质上软件定时器的使用相当 ...
基于Spring AOP实现的权限控制
1.AOP简介 AOP,面向切面编程,往往被定义为促使软件系统实现关注点的分离的技术.系统是由许多不同的组件所组成的,每一个组件负责一块特定的功能.除了实现自身核心功能之外,这些组件还经常承担着额外的 ...
关于sqlmapapi一点记录
关于sqlmapapi自己练习的还是很少今天看见freebuf上师傅的分享的内容自己练习了一下来自: https://www.freebuf.com/articles/web/204875.ht ...
Web安全之url跳转漏洞及bypass总结
0x01 成因对于URL跳转的实现一般会有几种实现方式: META标签内跳转 javascript跳转 header头跳转通过以GET或者POST的方式接收将要跳转的URL,然后通过上面的几种方式 ...
PHP7源码之array_unique函数分析
以下源码基于 PHP 7.3.8 array array_unique ( array $array [, int $sort_flags = SORT_STRING ] ) (PHP 4 >= ...
数据结构1_C---单链表的逆转
通过C语言函数实现单链表的逆转操作例: 输入数据1,2,3,4 输出数据4,3,2,1 一共三个文件: 头文件stulist,h :链表结点的定义,结点指针的定义源文件stulist.c:具体的实 ...

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