Vue ajax相关配置

发送ajax

<template>
  <div>
    <home-demo></home-demo>
    <home-demo-two :list="list"></home-demo-two>
  </div>
</template>
<script>
  import HomeDemo from './components/Demo'
  import HomeDemoTwo from './components/DemoTwo'
  import axios from 'axios'

  export default {
    name: 'Home',
    components: {
      HomeDemo,
      HomeDemoTwo
    },
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.getHomeInfo()
    }, methods: {
      //发送请求
      getHomeInfo() {
        axios.get('/api/wxmenu.json')
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res) {
        //请求成功
        res = res.data
        const data = res.data
        this.list = data.swiperList
        console.log(this.list)
      }
    }

  }
</script>

子组件接收数据

<template>
  <div>
    <div v-for="item in list" :auto="4000" :key="item.id">
      <div>{{item.imgUrl}}</div>
    </div>
    <mt-button @click="jump" type="default">点击跳转</mt-button>
  </div>
</template>
<script>

  export default {
    name: 'HomeDemoTwo',
    methods: {
      jump() {
        this.$router.push({path: '/HomeTwo'})
      }
    },
    props: {
      list: Array
    }
  }
</script>

<style lang="stylus" scoped>

</style>

axios 配置

axios init

import axios from 'axios';
import { Toast } from 'vant';
import Router from '@/router/index'
import store from '@/store'
import qs from 'qs';

// axios.defaults.baseURL = 'api/'; // 配置axios请求的地址
axios.defaults.baseURL = '/'; // 配置axios请求的地址
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;  //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
axios.defaults.headers.common['Authorization'] = ''; // 设置请求头为 Authorization
axios.defaults.headers.common['sessionid'] = store.state.sessionid; // 设置请求头

//配置发送请求前的拦截器 可以设置token信息
axios.interceptors.request.use(config => {
  //loading开始
  Toast.loading({
    mask: false,
    forbidClick: true,
    message: '加载中...'
  });

  console.log(config.data);
  config.data = qs.stringify(config.data)
  console.log("aaa");
  console.log(config);
  return config;
}, error => {
  //出错，也要loading结束
  Toast.clear
  return Promise.reject(error);
});

// 配置响应拦截器
axios.interceptors.response.use(res => {
  //loading结束
  if (!res.data.success) {
    //请求失败
    setTimeout(function () {
      Toast.clear
      Toast({
        message: res.data.msg,
        forbidClick: true,
        position: 'middle',
        duration: 1000
      });
    }, 100);
  } else {
    //请求成功
    Toast.clear
  }
  // 全局登陆过滤，当判读token失效或者没有登录时 返回登陆页面
  if (res.data.code == global.UNAUTH_CODE) {
    Router.push({path: '/toLoginHome'})
    return false;
  }
  return Promise.resolve(res);
}, error => {
  //提示错误信息
  let errorInfo = error.toString()
  console.log(errorInfo);
  let errorInfoList = errorInfo.split(' ')
  console.log(errorInfoList[6]);
  if (errorInfoList[6] == '404') {
    setTimeout(function () {
      Toast.clear
      Toast({
        message: '错误 404',
        forbidClick: true,
        position: 'middle',
        duration: 1000
      });
    }, 200);
  } else if (errorInfoList[6] == '504') {
    setTimeout(function () {
      Toast.clear
      Toast({
        message: '错误 504 请求超时',
        position: 'middle',
        duration: 1000
      });
    }, 200);
  } else {
    setTimeout(function () {
      Toast.clear
      Toast({
        message: '出错啦，请稍后再试',
        forbidClick: true,
        position: 'middle',
        duration: 1000
      });
    }, 200);
  }
  return Promise.reject(error);
});

export default axios;

使用

methods: {
      doLogOut() {
        this.$http.post('/pandora/LoginOut').then(res => {
        }).catch(error => {
        });
      },
      doLogin() {
        this.$http.post('/pandora/LoginByPwd',this.userInfo).then(res => {
          this.saveSession(res)
        }).catch(error => {
        });
      }
    }

package.json 添加

  "qs": "latest"