第一步创建一个放基地址/请求拦截器/相应拦截器的文件
utils/request.js文件中
/*
1,安装axios
2,导入axios
3,设置axios及地址(axios.create({}))
4,加入请求拦截与相应拦截
5,暴漏出去
6,导入调用(api/模块.js中导入使用)
*/
import axios from "axios" //导入
const _axios = axios.create({
baseURL:'http://119.91.150.211:3000/api'
})
// 请求拦截
_axios.interceptors.request.use((config) =>{
return config
},(err) =>{
return Promise.reject(err)
})
// 相应拦截
_axios.interceptors.response.use((res) =>{
return res
},(err) =>{
return Promise.reject(err)
})
export default _axios
第二步,在api里封装对应的请求 然后暴漏出去
api/test.js 在api下建立一个放对应模块请求的文件
//第一步导入及地址
import request from '@/utils/request'
/* 暴漏出去一个 登录的接口 */
export const sysLogin = () =>{
return request({
url:'/sys/login',
method:'post',
data:{
mobile:'13800000002',
password:'123456'
}
})
}
第三步 调用api中的接口实现发送请求
在.vue文件中
<template>
<div>
<button @click="btnClick">接口请求</button>
</div>
</template>
<script>
// 第一步导入 对应的登录接口api文件
import { sysLogin } from '@/api/test';
export default {
methods: {
async btnClick() {
const res = await sysLogin()
console.log(res);
}
}
}
</script>
就可以实现 在vue中的基本 请求操作了 要注意的就是跨域问题了