脚手架3

使用局部axios实例 配置一下基本路径和headers 请求头

/* 在入口main.js文件导入axios
并挂载到Vue构造函数的原型下 目的在于供所有Vue组件使用 
这样写就不用每个vue页面都导入axios*/

import axios from 'axios'

 this.instance = axios.create({
      baseURL: "http://timemeetyou.com:8889/api/private/v1/",
      headers: {
        Authorization: localStorage.token,
      },
    });

使用局部axios实例 设置请求拦截 和响应拦截\

    let con = axios.create();
    con.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        return config;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
    let ncon = axios.create();
    ncon.interceptors.response.use(
      function (response) {
        // 在发送请求之前做些什么
        return response;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );

使用axios获取接口信息

<template>
  <div id="app">
    <!-- <ul style="display:flex;">
      <li v-for="(v,i) in arr" :key="i" class="li-sty" @click="handler(v.id)">{{i+1}}、{{v.title}}</li>
    </ul> -->
    <!-- v-html会把之前内容替换 -->
    <button @click="login">登陆</button>
    <button @click="getUser">获取用户信息</button>
    <button @click="getPower">获取权限列表</button>
    <div>

    </div>
  </div>
</template>

<script>
import axios from 'axios'


export default {
  name: 'App',
  data(){
    return{
      // arr:[],
      // url1:'https://cnodejs.org/api/v1/topics',
      // url2:'https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc'
      instance:null
    }
  },
  created(){  
    // this.$axios.get('https://cnodejs.org/api/v1/topics')
    // .then(res=>{
    //   this.arr = res.data.data.slice(0,5);
    // // })
    // this.$axios.all( [axios.get(this.url1),axios.get(this.url2)] )
    // .then(axios.spread((res1,res2)=>{
    //   console.log(res1)
    //   console.log(res2)
    // }))
    // Promise.all( [axios.get(this.url1),axios.get(this.url2)] )
    // .then(res=>{
    //   console.log(res)
    // })

    // axios.get('/api')
    // .then(res=>{
    //   console.log(res)
    // })

    // this.instance = axios.create({
    //   baseURL:'http://timemeetyou.com:8889/api/private/v1/',
    //   headers:{
    //     'Authorization':localStorage.token
    //   }
    // })

    axios.defaults.baseURL = 'http://timemeetyou.com:8889/api/private/v1/'
    axios.defaults.headers.common['Authorization'] = localStorage.token

     axios.interceptors.request.use(
      function(config){
        console.log(config)
        return config;
      },
      function(err){
          console.log(err)
        return Promise.reject(err);
      }
    );
  },
  methods:{
    // handler(id){
    //   this.$axios.get('https://cnodejs.org/api/v1/topic/'+id)
    //   .then(res=>{
    //     console.log(res.data)
    //     this.str = res.data.data.content;
    //   })
    // }

    login:function(){
      // this.instance.post('login',{
      //   username:'admin',
      //   password:'123456'
      // })
      axios.post('login',{
        username:'admin',
        password:'123456'
      })
      .then(res=>{
        console.log(res.data)
        localStorage.token = res.data.data.token
      })
    },
    getUser(){
      this.instance.get('users',{
        params:{
          pagenum:1,
          pagesize:10
        },
        headers:{
          'Authorization':localStorage.token
        }
      })
      // axios.get('users',{
      //   params:{
      //     pagenum:1,
      //     pagesize:10
      //   }
      // })
      .then(res=>{
        console.log(res.data)
      })
    },
    getPower(){
       this.instance.get('rights/list')
       .then(res=>{
         console.log(res.data)
       })
    }
  }
 
}
</script>