1. 执行多个并发请求

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      url1: "https://cnodejs.org/api/v1/topics",
      url2: "https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc",
    };
  },
  created() {
    // 执行多个并发请求
    // Promise.all
    // Promise.all([axios.get(this.url1),axios.get(this.url2)]).then(res=>{
    //   console.log(res);
    // })

    // axios.all
    axios.all([axios.get(this.url1), axios.get(this.url2)]).then(
      axios.spread((res1, res2) => {
        console.log(res1);
        console.log(res2);
      })
    );
  },
};
</script>
复制代码

2. 局部配置

  data() {
    return {
      instance: null
    };
  },
  created() {
    // 局部配置：自定义配置新建一个axios 实例
    this.instance = axios.create({
      // 设置了baseURL，就不用把url写全了，直接写路径（例如：login）即可
      baseURL: "http://timemeetyou.com:8889/api/private/v1/",
      timeout: 3000,
      headers: {
        Authorization: localStorage.token,
      },
    });
  }  
复制代码

3. 全局配置

全局配置后，App.vue和子组件都可以使用。

  created() {
    axios.defaults.baseURL = "http://timemeetyou.com:8889/api/private/v1/";
    axios.defaults.headers.common["Authorization"] = localStorage.token;
    // timeout 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 timeout 的时间，请求将被中断
    axios.defaults.timeout = 3000;
  }  
复制代码

4. 拦截器

  created() {
    // 全局配置 添加请求拦截器
    axios.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        console.log("config", config);
        return config;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
    // 添加响应拦截器
    axios.interceptors.response.use(
      function (response) {
        // 对响应数据做点什么
        console.log("response", response);
        //可以添加数据
        response.data.str='helololololo....'
        return response;
      },
      function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      }
    );
  }