vue3之axios配置(阿飞)

1.使用npm i axios --save

2.全局使用 main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { showMixin } from './mixins/index'
// import axios from 'vue-axios'
import axios from 'axios'
// import VueCompositionApi from '@vue/composition-api'
// createApp(App).config.productionTip = false
// createApp(App).use(store).use(router).use(VueCompositionApi).mount('#app')
// =========配置minxin
// createApp(App).mixin(showMixin).use(store).use(router).mount('#app')
// ===========配置axios
const app = createApp(App)
axios.defaults.baseURL = 'http://www.kymid.com/testphp/public/index.php/api/'
app.config.globalProperties.$http = axios
app.mixin(showMixin).use(store).use(router).mount('#app')

3.在组件中使用

<template><div class="about"><h1>This is an about page</h1><button @click="mymixin">测试mixin</button><button @click="fn">测试mixin</button></div>
</template>
<script>
// import { showMixin } from '../mixins/index'
// export default {
//   mixins: [showMixin]
// }export default {created () {// this.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/about_get?lang=en').then(val => {this.$http.get('apis/about_get?lang=en').then(val => {console.log(val)})}}
</script>

方法二：在vue3中,新的组合式[API]没有this,那我们如果需要用到`this`怎么办?

getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 或 proxy 属性获得当前上下文，这样我们就能在setup中使用router和vuex了

import { getCurrentInstance, onMounted } from 'vue'setup (props, context) {// 在const { proxy } = getCurrentInstance()onMounted(() => {getData()})function getData () {proxy.$http.get('apis/about_get?lang=en').then(res => {console.log(res)})}}

方法三：使用provide 和 inject 方法共享

main.js中：

const app = createApp(App)
axios.defaults.baseURL = 'http://www.kymid.com/testphp/public/index.php/api/'
app.config.globalProperties.$http = axios
// 方法三：
app.provide('$axios', axios)

组件中：

import { getCurrentInstance, onMounted, inject } from 'vue'
// import { inject } from 'vue'export default {created () {// 方式一： 在created中 直接使用this调用// this.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/about_get?lang=en').then(val => {this.$http.get('apis/about_get?lang=en').then(val => {console.log(val)})},setup (props, context) {// 在const { proxy } = getCurrentInstance()onMounted(() => {getData()})function getData () {proxy.$http.get('apis/about_get?lang=en').then(res => {console.log(res)})}// 方法三： 使用共享const $axios = inject('$axios')$axios.get('apis/about_get?lang=en').then((resp) => {console.log(resp)})}}

vue3之axios配置(阿飞)相关推荐

Vue3（撩课学院）笔记09-axios简介，发起get请求的两种方式，发起带参的get及post请求，发起并发请求，并发请求结果将数组展开，axios全局配置，axios配置及封装，请求和响应拦截
1.axios简介 axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests) 2.axio ...
使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders.
基于vue3+TS构建的商城后台管理系统根据coderwhy老师指导搭建的项目为PC端商品后台管理系统. 报错: 使用TS+vue3封装axios时编译报错,提示You may need an ad ...
Vue-vben-admin Vue3+TS Axios的封装源码分析
Vue-vben-admin Vue3+TS Axios的封装源码分析前言一.近期再用Vue3+TS 重构之前Vue2的项目,因此想着借鉴一下业界较为优秀的代码,在Git上面找了好久,经过同事推荐 ...
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
Vue+axios配置踩坑记录
避免误导,先上亲测可用的代码: /*** Axios封装*./src/axios/index.js **/ import axios from 'axios' import { Notice,Mess ...
vue3.0 axios 引入及使用
vue3.0 axios 引入及使用安装axios 1.cmd安装 2.手脚架安装引入axios main.js 页面引入 axios使用 get方法 post方法安装axios 1.cmd安装 ...
vue使用axios配置多域名
vue使用axios配置多域名如有误,欢迎指教~ 文章目录 vue使用axios配置多域名说明配置域名 axios配置 request config数据效果图 api文件使用说明配置多域名 ...
关于axios配置拦截器不生效的问题
最近是在网上找了个开源项目准备二次开发,在跑后台项目时遇到个大坑,由于以前没遇到过,花了不少时间,今天被同事解决了,记录一下. 问题描述: axios配置请求拦截器响应拦截器(为了对请求统一设置tok ...

vue3之axios配置(阿飞)

方法二：在vue3中,新的组合式[API]没有this,那我们如果需要用到`this`怎么办?

方法三：使用provide 和 inject 方法共享

vue3之axios配置(阿飞)相关推荐

最新文章

热门文章

vue3之axios配置(阿飞)

方法二：在vue3中,新的组合式[API]没有this,那我们如果需要用到this怎么办?

方法三：使用provide 和 inject 方法共享

vue3之axios配置(阿飞)相关推荐

最新文章

热门文章

方法二：在vue3中,新的组合式[API]没有this,那我们如果需要用到`this`怎么办?