一套狠狠的axios流程,妈妈再也不用担心你的学习(上)

52 阅读1分钟

image.png

以注册为例子 业务层 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