vue项目封装axios请求

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
	}
	
},