第一步先创建一个http.js文件封装请求方法
//环境的切换 环境指的就是开发环境 和 生产环境
// 开发环境(development) 中用到的是测试接口 生产环境(production)
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
axios.defaults.timeout = 4000
// 请求拦截
axios.interceptors.request.use(config => {
config.headers = {DeviceType: 'H5'}
// 可每次发送请求之前的逻辑处理 比如判断token
return config
}
)
//响应拦截
axios.interceptors.response.use(response => {
//拦截处理响应结果，直接返回需要的数据
return response
}, error => {
console.log(error)
// if(error.response.status){}
})
// 使用promise返回axios请求的结果(Promise)
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
第二步创建一个api.js文件写不同的请求地址拼接在api.js文件中引入http.js文件
import {
get,
post
} from '../http/http.js';
//封装一个获取首页数据的方法 getAppIndex
// 首页
export function getAppIndex() {
return get('api/app/recommend/appIndex')
}
// 课程评论
export function postxiangqing(params) {
return post('api/app/courseComment', params)
}
最后在vue文件中引入api问件中需要用的接口方法
<script>
import {getAppIndex} from "../../api/api";
export default {
async mounted() {
var appIndex = await getAppIndex();
this.list = appIndex.data.data;
// console.log(this.list);
},
Processed:
0.023, SQL:
8
