promise封装axios

import axios from 'axios';
let baseURL;
//是判断生产环境或开发环境的依据的
if(process.env.NODE_ENV=='development'){
    baseURL = 'http://localhsot:8888/vue/demo1/api/' //开发环境
}else{
    baseURL = '/xxx'//生产环境
}
// axios.create 创建axios对象，包含baseURL  axios.get("url")
const $http = axios.create({
    baseURL,
})
//url 路径 params 参数 http://localhsot:8888/vue/demo1/api/a.php?page=3
export const get = (url,params)=>{
    params = params || {};//参数要么有  或 空对象
    return new Promise((resolve,reject)=>{
        // axiso 自带 get 和 post 方法
        $http.get(url,{params,}) //get请求  url 路径参数
        .then(res=>{       	 
                resolve(res.data);           
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
                resolve(res.data);
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

引用

<template>
    <div class="app">
        <button @click="test">测试</button>
    </div>
</template>
<script>
//promise:解决异步回调的问题
import { get, post } from "./utils/index";
export default{
  data(){
    return {   
    }
  },
  created(){
    this.getData();
  },
  methods:{
    test(){
      let a = 11;
      //创建promise对象
      let pro = new Promise(function(resolve,reject){
          if(a==11){
            resolve("成功");
          }else{
            reject("失败");
          }
      });
      pro.then((res)=>{
        console.log(res+"111");
      },(err)=>{
        console.log(err+"222"); //??
      })
    },
    //axios 异步请求  ，getData同步方法
    //async 异步请求的数据 同步显示
    async getData(){
      let url = "http://localhost:8888/vue/demo1/api/a.php";
      const res = await this.$http.get(url);
      //遍历res 渲染res
      console.log(res);
    }

  }     
}
</script>
 <style>
 </style>