Axios（自定义配置新建一个 axios 实例并且封装起来）

自定义配置新建一个 axios 实例

1. 先在src里面的某个文件夹里面创建一个.js文件（我的放在了http.js里面）
2. http.js里面的核心源码（红色部分）：

   import axios from 'axios';
   import Qs from 'qs'
   import router from '../router/index'
   
   const service = axios.create({//这个service是自定义（你自己起的名字）
     baseURL: 'http://xxxx.xxxxxxxxx.com/',//请求的公共地址
     timeout: 5000, // 请求超时时间
     // headers: {'X-Custom-Header': 'foobar'}
   });
   
   service.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     console.log(123);
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });
   
   //http response 拦截器
   //简单点说就是每次得到数据前都要经过这里
   service.interceptors.response.use(
     response => {
       const res = response.data;
       console.log(res);
       if (res.ret === 0) {//请求失败后台给的协议ret等于0
         if (res.errcode == 101) {//101
           router.push({
             path: '/login'
           })
         }
         else {
           alert(res.msg);
           return res;
         }
       }
       else {
         return res;
       }
     },
     error => {
       // TODO 弹窗处理
       alert(error.message);
       return Promise.reject(error)
     }
   )
   
   //封装put、get、post、delete、patch
   export function requestStringify(method, params = {}, beToken = true) {
     let token, session_id;
     if (beToken) {
       let tokenData = getToken();
       if (tokenData) {
         let res = JSON.parse(tokenData);
         token = res.token//获取到token
         session_id = res.session_id//获取到session_id
       }
     }
     switch (method) {
       case 'get':
         return {token, session_id, ...params};
       case 'put':
       case 'delete':
       case 'post':
       case 'patch':
         if (beToken) {
           return Qs.stringify({token, session_id, ...params})
         } else {
           return Qs.stringify({...params})
         }
     }
   }
   
   const TokenKey = 'H5-Token';
   
   //对token进行处理
   export function getToken() {//获取TokenKey值
     return window.localStorage.getItem(TokenKey)
   }
   
   export function setToken(tokenData) {//设置TokenKey值
     return localStorage.setItem(TokenKey, JSON.stringify(tokenData))
   }
   
   export function removeToken() {//
     return window.localStorage.removeItem(TokenKey)
   }
   
   export default service //导出去
   

---

关联到index.vue页面来 

核心源码：

<template>
  <div class="home-main">
......
    <ul>
      <li v-for="item in list">
        <a class="list-item-wrapper">
          <div class="list-item">
            <span class="list-time">[{{item.created_at}}]</span>
            <span class="list-text">{{item.quantify_name}}</span>
            <div class="list-count"><span style=" float: right;">{{item.count}}</span></div>
          </div>
        </a>
      </li>
    </ul>
......
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import request from '../api/http.js'
  import {requestStringify} from '../api/http.js'

  export default {
    name: 'index',
    components: {
      mHeader,
      sheet,
      mTabbar,
      mTabbarItem
    },
    data() {
      return {
        list: [],
        RadarData: null,
        max: 0,
        avg: 0,
        total: 0,
        values: [0, 0, 0, 0, 0, 0],
        relation_type: 1,
        season_type: 1,
        limit: 2,
      }
    },
    mounted() {
      request({
        method: 'post',
        url: 'v1/statistic/info-stu.json',
        data: requestStringify('post', {
          relation_type: this.relation_type,
          season_type: this.season_type,
          page: 1,
          limit: this.limit,//指定获取的数据条数,目前是假数据，数据怎么改也没有效果
        })
      }).then(res => {
        this.list = res.data;
      })
    },
    methods: {
 
    }
  }
</script>

<style lang="less">

</style>