vue-axios全局，局部请求

<template>
  <div id="app">
  
     v-html会把之前内容替换 
    <div v-html="str"></div> -->

    <button @click="login">登陆</button>
    <button @click="getUser">获取用户</button>
     <button @click="getAll">权限</button>
   
  </div>
</template>
<script>

import axios from "axios";
export default {
  name: "App",
 
  data() {
    return {
      instance: null,
    };
  },
  
  created() {
    // axios全局配置基本路径和请求头
    axios.defaults.baseURL = "http://timemeetyou.com:8889/api/private/v1/";
    axios.defaults.headers.common["Authorization"] = localStorage.token;
    axios.defaults.timeout = 3000;
    
     //interceptors请求拦截器
    axios.interceptors.request.use(
      function (config) {
        console.log("config", config);
        /* 在请求拦截内可以添加请求头 */
        //发送请求必须return
        //config.headers.Authorization = localStorage.token;
        return config;
      },
      function (error) {
        return Promise.reject(error);
      }
    );
    
    /* 添加响应拦截器，只要响应就会走一遍 */
    axios.interceptors.response.use(
      function (response) {
        console.log("response", response);
        response.data.msg = "你好中国"; //可以添加属性和值，返回数据
        return response.data; //.data可以直接把值return到服务器后端
      },
      function (error) {
        return Promise.reject(error);
      }
    );
  },
  methods: {
    login() {
      axios
        .post("login", {
          username: "admin",
          password: "123456",
        })
        .then((res) => {
          localStorage.token = res.data.data.token;
        });
    },
    getUser() {
      axios
        .get("users", {
          params: {
            pagenum: 1,
            pagesize: 5,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
  
  axios局部请求
  created() {
     设置baseURL使用 instance实例都不用把url写全
    this.instance = axios.create({
      baseURL: "http://timemeetyou.com:8889/api/private/v1/",
      timeout: 3000,
      headers: {
        Authorization: localStorage.token,
      },
    });
  },
  methods: {
    login() {
      this.instance
        .post("login", {
          username: "admin",
          password: "123456",
        })
        .then((res) => {
          console.log(res.data);
        });
    },

    getUser() {
      this.instance
        .get("users", {
          params: {
            pagenum: 1,
            pagesize: 10,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAll() {
      this.instance
        .get("rights/list", {})
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  }, 
  
执行多个并发出请求
   data(){
  return{
    url1:'',
    url2:''
  }
}, 
  created(){
 Promise.all([axios.get(this.url1),axios.get(this.url2)])
 .then(res=>{
   console.log(res);
 })

  axios.all([axios.get(this.url1),axios.get(this.url2)])
  .then(axios.spread(res1,res2=>{
    console.log(res1);
    console.log(res2);
  }))
} 

   data() {
    return {
      arr: [],
      str: "",
    };
  },
  created() {
    this.$axios.get("https://cnodejs.org/api/v1/topics")
    .then((res) => {
      this.arr = res.data.data.slice(0, 5);
      //slice对原数组不造成影响
    });
  },
  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;
      });
    },
  }, 
};
</script>

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