步骤一:在项目中下载axios
npm install axios步骤二:在src中新建文件夹叫做utils在文件夹中新建request.js文件
在request.js文件中配置:
示例:
1.定义方法名称:
//方法名称
const serve = axios.create({
//设置请求连接
baseURL:'http://localhost:3200',
//设置超时时间
timeout:30000
});2.设置请求拦截器
//设置请求拦截器
axios.interceptors.request.use(config=>{
//1.请求拦截器
//2.请求前做一些处理
//3.返回配置对象
//4.返回配置对象,让axios发送真正的请求
return config;
})3.设置响应拦截器
axios.interceptors.response.use(response=>{
//1.响应拦截器
//2.响应成功做一些处理
//3.返回响应数据
return response.data;
}, error=>{
return Promise.reject(error);
})4.暴漏接口
//暴露接口
export default serve;步骤三、在src新建api文件夹api文件夹中就是要去写方法的地方
我去请求基础信息就可以在文件夹中新建一个文件夹如:anjuan.js
引入axios封装文件在anjuan.js中
import request from '@/utils1/request'
//新建方法
export function getanjuan(){
return request({
method:'GET',
url:'/caseinfo/casefiles'
})
}步骤四:在组件中引入
import {getanjuan} from '../../api/anjuan';
//methods中使用
//这是es6中的新语法即为异步请求
async getData(){
await getanjuan().then(res=>{
console.log(res.data.data)
this.dataSource=res.data.data
this.$message.success('案卷信息获取成功')
}).catch(err=>{
console.log(err)
})
},注:上述为get请求在实际项目中还需要有post 等请求方式需要传参
post的写法
步骤一、在方法文件中写入
export function login(userData){
return request({
url:'/login/login',
method:'post',
data:userData
})
}
/*userData即为从组件中传入的数据
data:userData
*/步骤二、传入数据(组件中)
async getlogin(){
const userData ={
username:this.username,
password:this.password
}
await login(userData).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
}
















