vue3引入并封装vue-axios

vue-axios和axios区别：

1. axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件
2. axios使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定使用：Vue.prototype.$http = axios;
3. vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios);
4. 使用 Vue 的插件写法，更符合 Vue 整体生态环境。而直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。因此，我们更推荐使用vue-axios插件的方式，不太推荐是直接使用axios的方式。

//1、安装
npm i axios vue-axios --save
//2、引入
import axios from 'axios'
import vueAxios from 'vue-axios'
const app=createApp(App);
app.use(vueAxios,axios)
//3、使用方法
//方法1
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
//方式2
this.axios.get(api).then((response) => {
  console.log(response.data)
})
//方式3
this.$http.get(api).then((response) => {
  console.log(response.data)
})
4、拦截
使用vue-axios-plugin插件
//（1）安装
npm install --save vue-axios-plugin
//（2）引入
import vueAxiosPlugin from 'vue-axios-plugin'

在引入的时候报错了

无法找到模块“vue-axios-plugin”的声明文件。“D:/01-project/01-rd/npc-vue-dbfw/dbfw-dj/node_modules/vue-axios-plugin/dist/vue-axios-plugin.umd.js”隐式拥有 "any" 类型。
  尝试使用 `npm i --save-dev @types/vue-axios-plugin` (如果存在)，或者添加一个包含 `declare module 'vue-axios-plugin';` 的新声明(.d.ts)文件

我是在shims-vue.d.ts中引入 `declare module 'vue-axios-plugin’然后就不报错了

.d.ts 为了让已有的js做类型声明，declare关键字，用于类型声明

//（3）拦截
app.use(vueAxiosPlugin,{
    // 第二步：请求拦截处理
  reqHandleFunc: (config:any) => config,
  reqErrorFunc: (error:any) => Promise.reject(error),
  // 响应拦截处理
  resHandleFunc: (response:any) => response,
  resErrorFunc: (error:any) => Promise.reject(error)
})
//（4）使用
#在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法，使用如下
this.$http.get(url, data, options).then((response) => {
  console.log(response)
})
this.$http.post(url, data, options).then((response) => {
  console.log(response)
})
#你也可以通过 this.$axios 来使用 axios 所有的 api 方法，比如：
this.$axios.get(url, data, options).then((response) => {
  console.log(response)
})
 
this.$axios.post(url, data, options).then((response) => {
  console.log(response)
})