axios的二次封装

// 对axios进行二次封装
import axios from "axios"
// 利用axios对象的create方法，去创建一个axios实例
// request就是axios，只不过稍微配置了一下
const requests = axios.create({
    // 配置对象
    // 基础路径，在发请求时，路径当中会出现api
    baseURL: '/api',
    // 请求超时的时间5s
    timeout: 5000,
})
// 请求拦截器，在发请求前，请求拦截器可以检测到，可以在请求发出去之前做一些事
requests.interceptors.request.use((config) => {
    return config
})
// 响应拦截器
requests.interceptors.response.use((res) => {
    // 响应成功的回调函数
    return res.data
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('faile'));
});
export default requests

 在main.js里全局注册

import requests from "@/api/request";
Vue.prototype.$requests=requests;

在需要的页面调用接口

data() {
    return {
      goodsList: [],
      pageQuery: {},
      pageParam: {
        pageNo: 1,
        pageSize: 5,
        totalPages:0
      },
    };
  },
  components: {
    SearchSelector,
  },
  mounted() {
    this.pageQuery = this.$route.query;
    this.getList();
  },
  methods: {
    getList() {
      const queryParam={
        ...this.pageParam
      }
      this.$requests({ url: "/list", method: "post", data: queryParam }).then((res) => {
        if (res.code == 200) {
          this.pageParam.totalPages=res.data.totalPages
          this.goodsList = res.data.goodsList;
        }
      });
    },