axios的简单封装及在组件内使用

/**第一步
 * 配置编译环境和线上环境之间的切换
 * 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>

原文地址：https://www.cnblogs.com/lhl66/p/9017199.html