axios的网络请求，拦截器，以及api的抽取

首先安装axios及引用
npm install axios
import axios from “axios”
通过生命周期的created,在实例创建完成后被立即调用
created(){
}
建立生命周期函数 发送get请求

 created(){
    axios.get("http://kumanxuan1.f3322.net:8001/index/index")
    .then( res => {  //请求成功 打印 res.data数据
      console.log(res.data);
    })
    .catch( err =>{
      console.log(err);
    })
  }

axios拦截器 新建request文件夹 新建request.js文件

import axios from "axios"
const instance = axios.create({
        baseURL: "http://kumanxuan1.f3322.net:8001",
        timeout: 5000
    })
    //拦截器  技术点
instance.interceptors.request.use(config => {
    // 什么时候执行这个函数  发请求之前执行这个函数
    // 可以判断用户有没有登录，如果没有登录，就直接return 请求就不会不出去
    console.log(config); //本次请求的一些信息
    return config
}, err => {
    return Promise.reject(err)
})
instance.interceptors.response.use(res => {
    // 什么时候执行这个函数  在接受到响应之前，在执行then方法之前
    // 可以判断用户有没有登录，如果没有登录，就直接return 请求就不会不出去
    console.log(res); //本次服务器响应的一些信息
    return res //返回的这个res 被then方法的res形参接受了
}, err => {
    return Promise.reject(err)
})
export default instance

home.vue文件接受

import request from "@/request/request"
created(){
    request.get("/index/index")
    .then( res => {
      console.log('Secuess');
      console.log(res.data);
    })
    .catch( err =>{
      console.log('error');
      console.log(err);
    })
  }

api的请求抽取工作,开发中使用的发起的请求比较多，可以在request文件夹新建api.js文件，这样结构比较清晰

import request from "./request"
// 首页数据的请求
export const GetHomeList = () => request.get("/index/index")

导出之后再home.vue的文件中引用

import {GetHomeList} from "@/request/api"
export default {
  name: 'Home',
  data(){
    return {
      Searchvalue:""
    }
  },
  created(){
   GetHomeList()
    .then( res => {
      console.log('Secuess!!!13456464');
      console.log(res.data);
    })
    .catch( err =>{
      console.log('error');
      console.log(err);
    })
  },
  components: {
  }
}