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

随机推荐

github代码仓库提示：“We found a potential security vulnerability in one of your dependencies”
问题描述: Github上传代码后出现这样的错误: We found a potential security vulnerability in one of your dependencies. A ...
html5视频常用API接口
一.虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性) 属性值功能描述 controls controls 是否显 ...
.NET Core 读取配置文件方式总结
基于.NET Core的跨平台开发,配置文件与之前.NET Framework采用xml的config文件不同,目前主要是采用json文件键值对配置方式读取. 参考网上相关资料总结如下: 一.引入扩展 ...
不依赖远程API启动SEER区块链命令行钱包和网页钱包的方法
不依赖远程API启动命令行钱包和网页钱包的方法在SEER的见证人操作等需要使用命令行钱包的操作中,我们介绍了通过钱包连接远程API来和区块链交互的方法.类似这样: cli_wallet.exe -s ...
Java集合框架，你了解多少？相信你看了这篇汇总一目了然！
相信大多数的程序员都知道,Dictionary.Vertor.Stack和Properties这些类被用来存储和操作对象组.但是他们缺少一个核心的主题的. 集合框架设计成要满足以下的几个目标第一条: ...
flask 微电影网站
flask简介轻量级web应用框架 WSGI工具箱才用Werkzeug 模版引擎则使用Jinja2 Flask使用BSD授权 1.virtualenv的使用 (1)创建虚拟环境:virtualenv ...
NServiceBus+Saga开发分布式应用
前言当你在处理异步消息时,每个单独的消息处理程序都是一个单独的handler,每个handler之间互不影响.这时如果一个消息依赖另一个消息的状态呢? 这时业务逻辑怎么处理? ...
iguana::json/xml 序列化框架
环境:win10 vs2017 c++17 boost 1.下载源码:https://github.com/qicosmos/iguana 2.创建工程,包含源码目录.boost库目录:boos ...
Spring Boot项目中如何定制PropertyEditors
本文首发于个人网站:Spring Boot项目中如何定制PropertyEditors 在Spring Boot: 定制HTTP消息转换器一文中我们学习了如何配置消息转换器用于HTTP请求和响应数据, ...
原来热加载如此简单，手动写一个 Java 热加载吧
1. 什么是热加载热加载是指可以在不重启服务的情况下让更改的代码生效,热加载可以显著的提升开发以及调试的效率,它是基于 Java 的类加载器实现的,但是由于热加载的不安全性,一般不会用于正式的生产环 ...

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