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>