vue封装接口

找到src下的api

在里面创建一个名为Api.js的文件 

1,在里面写入接口

import axios from 'axios'//先引入axios
 
export async function menusIndex(data) {
  //这个data代表传过来的值
  return axios({
    url: '要请求的地址',
    method: 'POST',
    data,
  })
}


2,在页面中

import {staffList} from '@/api/Api.js';//引入


3,以这样的格式进行请求接口

staffIndex({
参数名:参数值,
参数名:参数值,
参数名:参数值
}).then(res=>{
console.log(res)
})

Vue封装接口的公共部分可以使用axios拦截器来实现。具体步骤如下: 1. 创建一个axios实例 ```javascript import axios from 'axios' const service = axios.create({ baseURL: 'http://localhost:8080', // 设置请求的基础URL timeout: 5000 // 设置请求超时时间 }) ``` 2. 添加请求拦截器 ```javascript service.interceptors.request.use( config => { // 在请求发送之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } ) ``` 在请求拦截器中,我们可以对请求进行一些处理,比如添加token、设置请求头等。 3. 添加响应拦截器 ```javascript service.interceptors.response.use( response => { // 对响应数据做点什么 return response.data }, error => { // 对响应错误做点什么 return Promise.reject(error) } ) ``` 在响应拦截器中,我们可以对响应进行一些处理,比如统一处理错误、处理响应数据等。 4. 将封装好的axios实例作为插件引入到Vue中 ```javascript const http = {} http.install = function (Vue) { Vue.prototype.$http = service } export default http ``` 5. 在main.js中引入并使用插件 ```javascript import Vue from 'vue' import App from './App.vue' import http from './plugins/http' Vue.use(http) new Vue({ render: h => h(App), }).$mount('#app') ``` 这样我们就可以在Vue组件中使用封装好的axios实例来发送请求了,如下所示: ```javascript this.$http.get('/api/user', { params: { id: 1 } }).then(res => { console.log(res) }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值