vue+ts下对axios的封装实现(2)

import Vue from 'vue'; import App from './App.vue'; import HighchartsVue from 'highcharts-vue'; Vue.config.productionTip = false; Vue.prototype.$httpService = new HttpService(); // 挂载服务 new Vue({ router, render: (h) => h(App), }).$mount('#app');

4. ts桥连(也不知道怎么称呼,自己从ng时就一直这么称呼)

行完上一步一定会发现报错啊,$httpService是个啥,不存在啊,这是因为ts的特性导致.

main.ts的同级目录创建一个xx.d.ts文件.

import {HttpService} from './service/http'; declare module 'vue/types/vue' { interface Vue { $httpService: HttpService; } }

5. 使用

在其它组件中使用,直接用this调用,不用再去引用,但是小心在某个this指向变了的回调中使用时找不到,至于怎么怎么解决应该都懂.

this.$httpService.postData({}, true, 'execute', 'xxx', 'tag').then((result) => { // doing }, (error) => { console.log(error); });

最后:这是在ts下的封装,js的话更简单点,甚至应该会更简单点(会少一些步骤,网上教程应该很多).挂载http工具的方式平时也适合我们定义全局工具类或者服务.