vue封装组件的思路,ts axios封装

安装axios和js-cookiecnpmiaxiosjs-cookie @ types/js-cookie-s在src下创建plugins文件夹，然后创建cookie.ts， 封装js-cookieimportcookiesfrom的consttokenkey=' token ' constrefreshtokenkey=' refresh-token ' exportfunctiongetotokenkey oken key } exportfunctiongetrefreshtokenkey () returnrefreshtokenkey (exportfunctionsettoken ) (token3360any ) )。 {returncookies.set(Tokenkey， token ) (}导出功能获取器) ) returncookies.get ) refreshtokenkey ) } 导出函数获取) )刷新令牌) )刷新{返回cookies.set (刷新令牌)， refreshToken () }export function removeToken ) ) cookies.remove ) tokenkey ) cookies.remove ) refreshtokenkey ) }在src下首先是axios和上一个包的cookie方法import axios，{ AxiosInstance } from 'axios '； 导入getToken，setRefreshToken，getToken，getTokenKey，getRefreshToken，getRefreshToken，removeToken，} from ' . constructor () this.instance=axios.create ) ) baseURL:'/API )， timeout:10000}}//接口拦截器init ()//接口拦截器this.instance.interceptors.request.use (config=)/如果有，则将cookie放在请求标头中的if(gettoken () { config.headers [ gettoken key ]=gettoken ) )； config.headers [ getrefreshtokenkey (]=getrefreshtoken )； }返回配置}， err={console.error(err} ) ) /响应拦截器this.instance.interceptors.response.use ) response={ conse } response res.code===-1 ) {/如果状态代码不以2开始，或者接口代码返回-1，则返回错误消息console.error ) return； (if ) RES.code！==0) if(RES.code==-3 ) { console.error (“登录过期”)； removeToken () else ) if ) RES.msg ) console.error ) RES.msg )； } } return Promise.resolve(res); } else { // 返回成功则把token存储一下 const headers = response.headers; const token = headers.token; const refresh_token = headers["refresh-token"]; if (token && refresh_token) { setToken(token); setRefreshToken(refresh_token); } return res; } }, error => { if (error.message === "Request failed with status code 500") { console.error('系统错误，请检查API是否正常！'); return; } let code = -110; if (error && error.response && error.response.status) { code = error.response.status; // 登陆过期 if (code === 401 || code === -3) { removeToken() } } else { console.error(error.message); } const err = { errCode: -110, errMsg: error.message || "Error" }; return Promise.resolve(err); }); } // 返回一下 getInterceptors() { return this.instance }} 在http文件夹下创建index.ts，封装axios import { AxiosPromise, AxiosResponse } from "axios";import { Interceptors } from "./interceptors";// 请求配置export class HttpServer { axios: any; // 获取axios实例 constructor() { this.axios = new Interceptors().getInterceptors(); } // 简单封装一下方法 request(config: any): AxiosPromise { return new Promise((resolve, reject) => { this.axios(config).then((res: AxiosResponse) => { resolve(res); }).catch((err: any) => { reject(err) }); }); }}const http = new HttpServer()export default http 在http文件夹下创建api.ts，接口同一管理 import http from "../http/index";var baseURL = "http://192.168.0.68:9600"// var baseURL = ""export class apiServer { post(url: string, data: any) { return http.request({ url: url, method: "post", data }) } getAppVersion(data:any){ return this.post(baseURL+"/management/app/getMDeviceVersionInfo.do",data); }}const api = new apiServer()export default api 在plugins文件夹下面新建axios.ts文件 import { App } from "vue";import api from "../http/api";import { AxiosInstance } from "axios";declare module "@vue/runtime-core" { interface ComponentCustomProperties { $axios?: AxiosInstance; }}export const axiosPlugin = { install(app: App): void { app.config.globalProperties.$axios = api; },};export default axiosPlugin 在main.ts里面引入 import { createApp } from 'vue';import App from './App.vue';import router from './router';import store from './store';import Vant from 'vant';import 'vant/lib/index.css';import { axiosPlugin } from './plugins/axios';createApp(App).use(store).use(router).use(Vant).use(axiosPlugin).mount('#app'); 使用方法 import { defineComponent, getCurrentInstance } from "vue";...const axios = getCurrentInstance()?.appContext.config.globalProperties.$axios;//调用 api.ts 的 getAppVersion接口axios.getAppVersion({ data: { versionId: "1", deviceType: "1" } }) .then((res: any) => { if ("1" == res.data.result) { let jsonData = res.data.jsonData; console.log(jsonData); } }); 使用方法完整示例 import { defineComponent, getCurrentInstance } from "vue";import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /srcexport default defineComponent({ name: "Home", components: { HelloWorld, }, setup(props, context) { const axios = getCurrentInstance()?.appContext.config.globalProperties.$axios; const getData = () => { axios.getAppVersion({ data: { versionId: "1", deviceType: "1" } }) .then((res: any) => { if ("1" == res.data.result) { let jsonData = res.data.jsonData; console.log(jsonData); } }); }; return { getData, }; },});