以注册为例子 业务层 async doRegister(){ //(1)判断校验是否通过 await this.$refs.regFormRef.validate()
//(2)发送ajax请求 const data=await userRegister(this.regForm) console.log(data) }
网络层 src/api/user import instance from '@/utils/request' //这个是要把后面的工具层做好才能导
export const userRegister=data=>{
return instance.request('接口','请求',参数)
比如return instance.request('/api/reg','post',data) }
工具层 src/utils/request.js //安装+导入axios import axios from 'axios'
//1.创建axios实例 //为什么?因为开发中一个项目可能不止一个基地址,不同的基地址使用不同的axios实例来发送请求。
const instance=axios.create({ baseURL:'基地址', timeout:'超时' })
//2.拦截器,最好自己去vscode去弄个axios拦截快捷,然后把axios改为我们的instance。 在拦截器中的响应拦截器。
instance.interceptors.response.use(response=>{ //对响应数据做点什么 //response:响应报文 return response.data},error=>{ //对响应错误做些什么 return Promise.reject(error) })
//3.封装一个request方法 //为什么?因为get和post传参方式是不同的,在网络层不需要区分,直接发三要素,在request方法中来区分不同的请求方法对应不同的参数。
instance.request=(url,method='get',data)=>{
const config={
url,
method } //区别get与post请求
config[method==='get'?'params':'data']=data
return instance(config) }
//导出实例
export default instance