Axios adapter---模拟后端请求

最新推荐文章于 2024-10-29 20:33:40 发布

京洛尘

最新推荐文章于 2024-10-29 20:33:40 发布

阅读量2.1k

点赞数

文章标签：前端开发 vue

本文链接：https://blog.csdn.net/luohe1234/article/details/78916279

版权

本文介绍了如何在前端项目中使用Axios模拟后端请求。首先定义了axios的API接口，然后展示了组件中调用这些接口的方式。接着，详细说明了如何设置Axios的mock转发接口来模拟数据返回。最后，提到了在页面交互中触发axios请求的方法。

摘要由CSDN通过智能技术生成

我们在前端开发过程中会出现向后端发送ajax请求的时候，当然我们在前端也可以进行模拟后端的请求，这里就会使用到Axios adapter，它会在浏览器端进行拦截get请求或者post请求。

        1、首先是定义axios的api---api.js文件

          import axios from 'axios'

          let base = ''

export const getUserListPage = params => axios.get(`${base}/user/list`, { params });

          2、定义组件的调用方式---这里其实就是在页面中要进行的

          import {getUserListPage} from '../api/api';

          getUser(){
         let para = {
                       page: this.page,
                       name: this.filters.name
            };
            getUserListPage(para).then((res) => {}
        }
       3、定义axios的mock转发接口
        mock.onGet('/user/listpage').reply((config) => {

      return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve([200, {
                        total,
                        users: mockUsers,
                    }]);
                }, 100);
            });
        });

      4、在页面上点击按钮等触发axios中的定义requestLogin()的方法
      getUser(){};

       方法里面的参数就是你想要发送过去处理的数据