/**第一步
 * 配置編譯環境和線上環境之間的切換
 * baseUrl: 域名地址
 * routerMode: 路由模式
 * imgBaseUrl: 圖片所在域名地址
 *
 */
let Host = ‘‘;
let routerMode = ‘hash‘;
//let imgBaseUrl;

if(process.env.NODE_ENV == ‘development‘) {
    Host = ‘http://test.xxx.com‘; //測試環境 host
    //imgBaseUrl = ‘http://cangdu.org:8001/img/‘;  //如果圖片需要放到第三方平臺可以更改網絡路徑
 


} else if(process.env.NODE_ENV == ‘production‘) {
    Host = ‘http://xxx.com‘;   //生產環境 host
    //imgBaseUrl = ‘http://cangdu.org:8001/img/‘;  //如果圖片需要放到第三方平臺可以更改網絡路徑
}

export {
    Host,
    routerMode
    //imgBaseUrl,
}

//第二步
import { Host } from ‘./env‘;
import Vue from ‘vue‘;
import axios from ‘axios‘;
import { ToastPlugin, AlertPlugin } from 
 
‘vux‘;
import Qs from ‘qs‘;
//axios.defaults.timeout = 5000; //響應時間
axios.interceptors.request.use(function(config) {
  //在發送請求之前做一些事情
  return config;
}, function(error) {
  // 請求錯誤做一些事情
  return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
  //對響應數據做一些處理
  return response;
}, 
 
function(error) {
  // 對響應失敗做一些處理
  return Promise.reject(error);
});

//get封裝
export function getAjax(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}
//post封裝
export function postAjax(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, Qs.stringify(data), {
          headers: {
              ‘X-Requested-With‘: ‘XMLHttpRequest‘,
            ‘Content-Type‘: ‘application/x-www-form-urlencoded‘,
          }
        })
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

//第三步
import { Host } from ‘./env‘;
import { getAjax, postAjax } from ‘./http‘
import { formatParam } from ‘./mUtils‘
import Qs from ‘qs‘;
//報名預訂
export function signUpAdvance(phoneNum, code) {
  let data = {
    phone: phoneNum,
    captcha: code,
  }
  const res4 = postAjax(`${Host}/website/login`,data);
  return res4;
}

// 短信填寫
export function getCode(pages) {
  let params = {
    page: pages
  }
  const res6 = getAjax(`${Host}/website/banner/?${formatParam(params)}`);
  return res6;
}

//第四步（組件內使用）
<script>
import { getCode, signUpAdvance } from ‘../config/api‘
export default {
  data() {
    return {

    }
  },
  created() {
   //get請求
    getCode(‘home‘).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })

  },
  mounted() {
   //post請求
    signUpAdvance(‘15220074083‘,‘400220‘).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
}

</script>

axios的簡單封裝及在組件內使用