axios发送请求

vue 内发起网络请求常用插件：axios fetch

一、想要使用 axios ：
1.下载安装 npm install axios --save

2.使用

（1）、 页面直接引入使用

<script>
import axios from "axios";
 
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    //两种格式
    axios
      .get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
      .then((res) => {
        console.log(res);
        this.list = res.data.message;
      });
 
    axios({
      method: "GET",
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    }).then((res) => {
      console.log(res);
      this.list = res.data.message;
    });
  },
};
</script>

（2）、全局引入 在 main.js 中

import axios from 'axios'
Vue.prototype.$axios = axios

二、设置拦截器
拦截器有 请求拦截：开启加载动画，设置请求头

            响应拦截：关闭加载动画，错误状态码的处理，格式化我们的响应参数

如何设置：

//引入
import axios from 'axios'
//实例化的过程
const instance = axios.create({
  baseURL: 'https://api-hmugo-web.itheima.net/api/public/v1', // 基准地址
  timeout: 5000 // 超时时间
})
//请求拦截
instance.interceptors.request.use(config => {
  console.log('请求加载动画开启......');
  return config
})
//响应拦截
instance.interceptors.response.use(res => {
  console.log('请求加载动画关闭......');
  return res
})
//挂载
Vue.prototype.$axios = axios

三、封装 axios请求
封装 axios 请求可以将 api 统一管理，使接口更清晰，方便代码的维护。

如何封装 axios 请求：

1、在 src 文件夹中创建 request 文件夹

2、在 request 文件夹中创建 request .js 文件引入 axios，设置拦截器，在文件中代码如下：

//引入
import axios from 'axios'
//实例化的过程
const instance = axios.create({
    baseURL: 'https://api-hmugo-web.itheima.net/api/public/v1', // 基准地址
    timeout: 5000 // 超时时间
})
//请求拦截
instance.interceptors.request.use(config => {
    console.log('请求加载动画开启......');
    return config
})
//响应拦截
instance.interceptors.response.use(res => {
    console.log('请求加载动画关闭......');
    return res
})
//导出
export default instance

3、再创建 api.js 文件 写具体请求 代码如下：

import instance from "./request";
 
const getBanner = async () => {
    let data = await instance.get('home/swiperdata')
    return data
}
 
export {
    getBanner
}

4、在发送请求页面引入使用

<script>
import { getBanner } from "../request/api";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    getBanner().then((res) => {
      this.list = res.data.message;
    });
};
</script>