前端学习（2213）：网络请求模块的选择--axios拦截器使用

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import axios from 'axios'
//import { request } from 'https';
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

/* axios({
    url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
    console.log(res)
})

axios({
        url: 'http://123.207.32.32:8000/home/data',
        params: {
            type: 'pop',
            page: 1
        }
    }).then(res => {
        console.log(res)
    })
    //基础url
axios.defaults.baseURL = 'http://123.207.32.32:8000'
    //超时时间
axios.defaults.timeout = 5000
    //并发请求
axios.all([axios({

    url: '/home/multidata'
}), axios({

    url: '/home/data',
    params: {
        type: 'sell',
        page: 4
    }
})]).then(result => {
    console.log(result)
})

axios({
    url: '/category'
}) */
/* const instances = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
})
instances({
    url: '/home/multidata'
}).then(res => {
    console.log(res)
})

instances({
    url: '/home/data',
    params: {
        type: 'sell',
        page: 4
    }
}).then(res => {
    console.log(res)
}) */
import { request } from './network/require'
/*
request({
    url: '/home/multidata'
}, res => {
    console.log(res)
}, err => {
    console.log(err)
}) */
request({
    url: '/home/multidata'
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

require.js

import axios from 'axios'

export function request(config) {
    return new Promise((resolve, reject) => {
        //创建axios的实例
        const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })

        //拦截器
        //比如config的信息不符合服务器的要求
        //每次发送网络请求搞一个图标
        instance.interceptors.request.use(config => {
                console.log(config)
                return config
            }, err => {
                console.log(err)
            })
            //发送网络请求
        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
            //return instance(config)
    })
}

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

运行结果