简单粗暴上代码上注释 (看不懂算我输系列第一期)
在src目录下新建api文件夹和http文件夹,里面放上相应的JS结尾的文件
//http.js 存放封装逻辑，和请求拦截器、响应拦截器 import axios from "axios" if(process.env.NODE_ENV === "development"){ //测试环境和上线环境网址前半部分相同地方 axios.defaults.baseURL = "http://120.53.31.103:84"; }else if(process.env.NODE_ENV === "production"){ axios.defaults.baseURL = 'http://wap.365msmk.com'; } //设置超时时间 axios.defaults.timeout = 10000; //请求拦截 axios.interceptors.request.use(config =>{ //判断PC或手机或者小程序 ***只是演示*** config.headers = { DeviceType: 'H5'}//响应头参数 return config }) // 响应拦截 axios.interceptors.response.use(response=>{ return response.data //拦截处理相应结果,直接返回需要的数据 }),err=>{ console.log(err) } //promise拼接路径 get post请求方式 亦或是其他请求方式 export function get(url,params){ return new Promise((resolve,reject)=>{ axios.get(url,{ params: params }).then(res=>{ resolve(res) }).catch(err=>{ reject(err) }) }) } //这里踩坑post和get请求拼接的方式不一样 export function post(url,params){ return new Promise((resolve,reject)=>{ axios.post(url,params) .then(res=>{ resolve(res) }) .catch(error=>{ reject(error) }) }) }api部分
//api部分 存放项目中所有请求接口的url和请求方式 //引入之前写好的http import { get, post } from "../http/http.js"; //配置后半截请求地址 逐一抛出 //首页名师部分 export function GetApp() { return get("/api/app/recommend/appIndex") } //请求地址后半截 export function GetAppBanner() { return post("/api/app/banner") } //页面请求部分 async mounted() { //轮播图 let res = await GetAppBanner(); this.banner = res.data.data; // console.log(this.banner) //名师阵容 精品课程 等 res = await GetApp(); this.list = res.data.data; console.log(this.list); },请求时一定要注意请求方式,否则会报object的错误,根据错误去找到相应的位置即可
除了封装后直接在页面引入http.js之外还有一种方式就是将http挂载在Vue的原型上,即在main.js里面写入 Vue.prototype.$Http = Http
methods: { async onDelete(info){ let res = await this.$Http.delContact( { id:info.id } ) if(res.code === 200){ Toast('删除成功') this.getList() } } }如果你觉得本篇文章够简单易懂,对你有所帮助的话,请点点你的关注,你的关注是对我最大的支持,博主长期更新,有事私信,我都在
