axios模块化

最新推荐文章于 2023-06-15 11:10:47 发布

~那一刻~

最新推荐文章于 2023-06-15 11:10:47 发布

阅读量328

点赞数

分类专栏：网络请求文章标签： vue

本文链接：https://blog.csdn.net/weixin_45045593/article/details/108138355

版权

网络请求专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中如何实现axios的模块化管理。首先，通过创建一个名为api的文件夹并在其中建立http.js文件来组织HTTP请求。然后，在main.js中全局引入axios配置，以便在项目的各个组件中方便地调用和使用HTTP接口。

摘要由CSDN通过智能技术生成

安装axios

npm i axios

新建一个api文件夹.里面建个http.js文件,当然名字可以随便取

// 导入axios
import axios from 'axios'

//设置基地址
const http = axios.create({
   baseURL: '地址'
})

//暴露http
export default http;

//post方法
export const login = ({username, passward}) => {
   return http.post('login', {
   	username, //解构对象用法
   	password
   })
}

//get方法
export const filter = (params) => {
   return axios.get('/pluginserver/analysis/plugin_module', {
       params: {
           params
       }
   }
   )

}

在main.js引入

import axios from './api/http'
//挂载到原型
Vue.prototype.$axios = axios;

组件中使用

<script>
//引入文件
import { login } from '../api/http'
   export default {
   	data(){
   		return{
   			username: 123,
   			passward: 456
   		}
   	},
   	methods: {
   		//引用方法
   		yinYong() {
   			login({ username: this.username,passward:this.passward }).then(res => {
   				console.log(res);
   			})
   		}
   	}
   }
</script>