步骤一:在项目中下载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)
      })
    }