封装axios请求

1.创建request.js（存放axios实例）

import axios from "axios";

export function request(config) {
  //创建axios实例
  const instance = axios.create({
    baseURL: "这里输入接口的baseURL",
    timeout: 5000,
  });
  //拦截器
  instance.interceptors.request.use(
    (config) => {
      return config;
    },
    (err) => {}
  );
  //响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log(err);
    }
  );
  //发送请求
  return instance(config);
}

2.创建xxx.js存放不同功能接口函数，并导出

import { request } from "./request";

//注意请求方法method,以及传参数
export function getData(params) {
    return request({
        url:'/frontDemo/queryPage',
        method:'get',
        params
    })
}
export function addRuleInfo(data) {
    return request({
        url:'/frontDemo/addObject',
        method:'post',
        data
    })
}

3.在自己的vue页面中引入上面的接口函数，并在合适的位置使用

<script>
import {
  getData,
  addRuleInfo,
} from "../../network/xxx.js";

  methods: {
    //onSearch()----查询按钮，获取数据
    onSearch() {
      let params = {
        wasteFactoryName: this.queryInfo.wasteFactoryName,
        wasteName: this.queryInfo.wasteName, //危废名
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getData(params).then((res) => {
        this.tableInfo = res.data.list;
        this.total = res.data.total;
        this.currentpage = res.data.pageNum;
        this.pageSize = res.data.pageSize;
        this.pageNum = res.data.pageNum;
        console.log(res.data.list);
      });
    },
</script>




}