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

随机推荐

为你的Mysql排序查询增加一个排序号
排序号,在需要排序的查询中比较常见,今天再一次遇到这种场景,不常写,所以上手比较生疏,记录一下,或许对更多的人也有用处. 起初在网上进行了一下简单的搜索,但是文章都挺乱,可读性都不太高,经过一番调查, ...
JZOJ10004 列车调度
[JZOJ100041]列车调度 Description Input Output Sample Input Sample1: 3 1 2 3 Sample2: 9 1 3 2 4 8 6 9 5 7 ...
macOS10.14.2 gem 更新问题
macOS10.14.2,最近cocoapods不能正常使用了. 终端输入 sudo gem update –system 显示如下错误 ERROR: While executing gem … (G ...
树莓派(4B)Linux + .Net Core嵌入式-HelloWorld(二)
一.新建.Net Core项目新建.Net Core3.0的控制台应用,代码如下 namespace Demo { class Program { static void Main(string[] ...
PHP in_array
1.函数的作用:判读一个元素是否在一个数组存在 2.函数的参数: @param mixed $needle @param array $array 3. if it’s ok to use isset ...
[JZOJ5773]【NOIP2008模拟】简单数学题
Description 话说, 小X是个数学大佬,他喜欢做数学题.有一天,小X想考一考小Y.他问了小Y一道数学题.题目如下: 对于一个正整数N,存在一个正整数T(0<T&l ...
Cocos2d-x 学习笔记(11.2) RotateBy RotateTo
1. RotateBy RotateTo 两个旋转方法.RotateBy是在当前角度上旋转设置的角度.RotateTo是直接旋转到设置的角度,方向遵循“就近原则”.两者没有相互继承关系. 1.1 成员 ...
php有orm吗
ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中.本质上就是将数据从一种形式转换到另外一种形式. ORM提供了所有SQL语句的生成,代码人员远离了数据库概念.从 ...
Spring Boot从零入门1_详述
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 微信公众号`小白AI`或者网站 [https://xiaobaiai.net](https://xiaobaiai.net) ![](h ...
Textbox输入状态提示
前: <DockPanel Margin="> <TextBox SelectionChanged="TextBox_SelectionChanged" ...

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