常用封装请求后台数据接口的api方法，方便复用

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：

// 创建一个 axios
import 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.思路图解