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