vue封装axios请求

第一步先创建一个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);
    },