Typescript中使用Axios
1)Vue.prototype
在vue项目main.js文件中:
Vue.prototype.$appName = 'My App'
这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
2)Axios create的含义
// 2.学会使用axios.create( )创建axios实例
// var instance = axios.create({
// baseURL: 'https://some-domain.com/api/',
// timeout: 1000,
// headers: {'X-Custom-Header': 'foobar'}
// });
// 创建实例的好处:统一(批量)处理request/response
// (1)例如你在每次的请求中都要带 cookie, 你或许可以在每个请求中这么写:
// axios.get('/user1',{withCredentials:true});
// axios.get('/user2',{withCredentials:true});
// ... ...
// 但是你也可以这么用:
// var instance = axios.create({
// withCredentials:true
// });
// instance.get('/user1').then();
// instance.get('/user2').then();
// ... ...
// (2)如果你的多个请求前缀都是相同的,那么你就可以使用baseUrl
// bad:
// axios.get('http://www.baidu.com/api/city').then();
// axios.get('http://www.baidu.com/api/region').then();
// axios.get('http://www.baidu.com/api/user').then();
// good:
// var instance = axios.create({
// baseUrl: http://www.baidu.com/api
// });
// instance.get('/city').then();
// instance.get('/region').then();
// instance.get('/user').then();
3)Vue声明的补充类型
// 插件可以增加 Vue 的全局/实例属性和组件选项。在这些情况下,在 TypeScript 中制作插件需要类型声明。庆幸的是,TypeScript 有一个特性来补充现有的类型,叫做模块补充 (module augmentation)。
// 例如,声明一个 string 类型的实例属性 $myProperty:
// // 1. 确保在声明补充的类型之前导入 'vue'
// import Vue from 'vue'
// // 2. 定制一个文件,设置你想要补充的类型
// // 在 types/vue.d.ts 里 Vue 有构造函数类型
// declare module 'vue/types/vue' {
// // 3. 声明为 Vue 补充的东西
// interface Vue {
// $myProperty: string
// }
// }
4)定义如下
import Vue from "vue";
import { AxiosInstance } from "axios";
declare module "vue/types/vue" {
interface Vue {
$http: AxiosInstance;
}
}
5)main.ts中的代码
const http = axios.create({
baseURL : 'http://localhost:3000'
})
Vue.prototype.$http = http
Vue.prototype.$httpajax = http
Typescript中使用Axios相关推荐
- 如何在typescript中使用axios来封装一个HttpClient类
我们通常开始直接在代码中使用像axios这样的第三方库.这没有错.但是,在不断变化的库,软件包,版本等世界中,直接使用这些库API可能会导致代码不一致. 一个好的做法是创建自己的抽象并将对库API的调 ...
- Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
- 在vuejs 中使用axios不能获取属性data的解决方法
在vuejs 中使用axios不能获取属性data的解决方法 参考文章: (1)在vuejs 中使用axios不能获取属性data的解决方法 (2)https://www.cnblogs.com/lo ...
- 如何在TypeScript中删除数组项?
本文翻译自:How do I remove an array item in TypeScript? I have an array that I've created in TypeScript a ...
- typeScript面试必备之-通识七:typeScript中的可索引接口(数组,对象)+类类型接口...
可索引接口:数组.对象的约束 (不常用) ts定义数组的方式 var arr:number[]=[2342,235325]var arr1:Array<string>=['111','22 ...
- 在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
- axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
- vue脚手架中使用axios
虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下: npm inst ...
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
最新文章
- DeepMind开源AlphaFold,蛋白质预测模型登上《Nature》
- Delphi Form Designer (窗体设计器)之四
- 微信小程序(6)模板详解 template
- 如何利用python自动化办公项目_python办公自动化:自动进行word文档处理和排版
- java udp丢包重发_UDPDataPacker_Java数据报之失序和丢包
- Hive命名空间-自定义变量
- 硬件工程师相关书籍整理
- 2023年天津天狮学院专升本市场营销专业《管理学》考试大纲
- 为什么要经常更换无轴螺旋输送机叶片?
- JS面试须知--字符串对象
- Stata新命令:readWind-快速读入并转换万德数据
- 怎么利用视频号引流?
- sender通用收发包测试工具
- ubuntu下新建用户
- 社会治理网格化新华三移动IT助江西铺设综合治理“一张网”
- 使用vlookup嵌套INDIRECT函数实现跨表数据引用
- 计算自然对数底e的值
- 【性能|优化】TB级flink任务报错分析:Could not compute the container Resource
- 200行Python制作音乐下载器,支持所有主流的平台
- 直播预告 | 合宙是在走窄路吗?专注优势与广泛发展的选择
热门文章
- C++中流的基本概念
- C++中的逻辑操作符重载
- python3.6 3.7共存_[转]CentOS 7安装Python3.6过程(让linux系统共存Python2和Python3环境)...
- java不看答案不会_Java新手必备:20道java基础面试题,不看答案你会几道题?
- 超级玛丽地图java_我的世界超级玛丽地图包
- android库项目管理,一个android工程代码多个差异化项目管理方法探讨
- 马斯克超级计算机玩吃鸡,在50亿美元打造的计算机上运行《绝地求生大逃杀》会怎样?...
- Oracle序列的建立以及使用
- php编程查错,盘点PHP编程常见失误
- linux mysql libc.so_mysql-arm-linux-gcc编译报错:libc.soformatnotrecognized.