欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios封装模块化

程序员文章站 2022-06-18 11:04:09
安装axiosnpm i axios新建一个api文件夹.里面建个http.js文件,当然名字可以随便取// 导入axiosimport axios from 'axios'//设置基地址const http = axios.create({ baseURL: '地址'})//暴露httpexport default http;//封装一个方法export const login = ({username, passward}) => { return....
  1. 安装axios
npm i axios 
  1. 新建一个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 } } ) } 
  1. 在main.js引入
import axios from './api/http' //挂载到原型 Vue.prototype.$axios = axios; 
  1. 组件中使用
<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> 
相关标签: 网络请求 vue