1.每个vue项目大小都应该封装下公共请求,比较方便,方便我们项目中的调用
(1)首先先安装axios
cnpm i axios
(2)新建一个httt.js文件,准备封装axios
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 = 'https://wap.365msmk.com/'
}
//设置超时时间
axios.defaults.timeout = 10000;
// 请求拦截
axios.interceptors.request.use(
config =>{
config.headers={DeviceType:'H5'}
return config
}
)
//响应拦截
axios.interceptors.response.use(
response =>{
return response
}
)
//get请求
export function get(url,params){
return new Promise((resolve,reject)=>{
axios.get(url,{
params
}).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
//post请求
export function post(url,params){
return new Promise((resolve,reject)=>{
axios.post(url,params).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
(3)在接口页面api.js统一引用导出
import {get,post} from './http.js'
export function getList(){
return get('api/app/recommend/appIndex?')
}
//首页轮播图
export function getBanner(){
return get('api/app/banner?')
}
//课程筛选
export function getClass(){
return get('api/app/courseClassify?')
}
//首页明星讲师详情
export function getTeacher(id){
return get('api/app/teacher/'+id)
}
//首页课程详情
export function classXiang(id){
return get('api/app/courseInfo/basis_id='+id)
}
//课程详情的课程大纲
export function classGang(params){
return post('api/app/courseChapter',params)
}
//课程详情的课程评论
export function classPing(params){
return post('api/app/courseComment',params)
}
//讲师详情的主讲课程
export function getTeacherXiang(params){
return post('api/app/teacher/mainCourse',params)
}
//首页的热门资讯详情
export function getHot(params){
return post('api/app/information/detail',params)
}
(4)页面调用api
import {getList,getBanner} from '../network/api.js'
async mounted(){
var res = await getList()
var banner = await getBanner()
//列表
if(res.data.code==200){
this.list= res.data.data
}
// 轮播图
if(banner.data.code==200){
this.images = banner.data.data
}
},