axios拦截器的使用

1.安装axios

npm install axios --save

2.导入aixos

1.在src目录下创建network
2.在network目录下创建request.js,home.js文件
3.
（1）在request.js文件下写入下面代码

//导入axios拦截器
import axios from "axios";
//导出request函数
export function request (config) {
    //1.创建axios实例
    const instance =axios.create({
    //请求的基地址
    //这个api需要自己写  （http://localhost:21025/api/）
      baseURL:'http://localhost:21025/api/',
      //请求延时5s
      timeout:5000
    })
    //返回这个实例函数这个
  return instance(config)
}

（2）在home.js中实现如下代码

//导入request
import {request} from "./requet";

//这是再次封装了一次方便后期维护，可以直接在request中直接实现
export function getHome() {
  return request({
  //这是instance函数的参数，会拼接在baseURL地址后面
    url:'first/Getrun'
  })
}

3.axios拦截器的使用

//index.vue文件
<template>
  <div>
    npm run
    //data里面的数据（从api中接受到的）
    {{first}}
  </div>

</template>

<script>
//导入getHome函数
  import {getHome} from "../network/home";

  export default {
    name: "index",
    data() {
      return {
        first: {
          Type: String
        }
      }
    },
    //生命周期函数，在组件创建的开始就执行下面的函数
    created() {
      this.getHome()
    },
    
    methods:{
      getHome(){
      //从axios中拦截下来的函数，与Promise异步函数用法相似
        getHome().then(res=>{
        //让上面定义的fist数据接收到从api中接受的数据
          this.first = res.data;
        })
      }
    }
  }
</script>

<style scoped>

</style>

axios拦截器的简单使用到此为止