1.准备数据api请求接口

创建utils/apiConfig.js文件：

// 数据api请求接口
export default {
  login: {
    url: '/accounts/login',
    method: 'post',
  },
  banners: {
    url: '/scenics/banners',
    method: 'get'
  }
}

2.配置axios

创建utils/http.js：

// 创建一个 axiosimport axios from 'axios'  // 引入接口文件import APIConfig from '@/utils/apiConfig.js' const http = axios.create({  baseURL: 'http://157.122.54.189:9095'})  // 封装导出一个myrequest函数，接收两个参数（api名字，和发送请求要传给服务端的参数）export const myrequest = function (apiName, data) {//apiName是一个变量，所以要用下标方式获取  const { url, method } = APIConfig[apiName]  const options = {    url,    method  }  // 如果是get 数据属性叫params  // 如果是post 数据属性叫data  if (method.toUpperCase() === 'GET' && data) {    options.params = data  }  if (method.toUpperCase() === 'POST' && data) {    options.data = data  }  return http(options)}// 暴露export default http

3.调用使用封装好的接口请求

在index.vue:

<script>//引入封装的文件import { myrequest } from "@/utils/http.js";export default {  data() {    return {      // 轮播图数据      banners: [],    };  },  async mounted() {    // 获取轮播图数据    // let res = await bannersIndex();    // 使用封装的api请求数据    let res = await myrequest("banners");    const { data } = res.data;    this.banners = data;    console.log(res);    // console.log(this.$axios({ url: "/scenics/banners" }));  }, };</script>

4.思路图解