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

痛定思痛。 2022-02-26 09:20 418阅读 0赞

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

1.  先在src里面的某个文件夹里面创建一个.js文件（我的放在了http.js里面）![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][]
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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: /images/20220226/db6c7c8940c44a9ab3ed0f9bf9fa46e8.png