vue项目中配置简单的代理与promise,并简单封装请求接口

简介: vue项目中配置简单的代理与promise,并简单封装请求接口

正向代理:

首先在vue项目根目录下,找到vue.config.js(vite框架下是vite.config.js)文件,找到server:{},

如果项目地址为http://medical.kuxia.top/api/Admin/del_area

内部添加以下代码:

proxy: {
      '/api': {
        target: 'http://medical.kuxia.top/api',//项目路径
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ''), //重写路径
      },

其中地址名各自为

http://medical.kuxia.top/api/Admin/del_area

协议-域名/模块名/控制器/操作函数

代理目录:/api  

代理地址:http://medical.kuxia.top/api

替换路径:/api

反向代理:

一般在项目运行服务器内配置:

配置项与配置正向代理相同

promise:

异步编程,解决向外部传参

普通函数可以通过return返回值,但return只会返回给上层,如果多层时拿不到值;

promise不论多少层,都可以将值传递给then,只需要在then函数内写接下来的操作

let del = new Promise((resolve) => {
    axios({
        url: '/api/Admin/del_area',
        method: 'GET',
        params: {
        }
    }).then(res => {
        resolve(res)
    })
})
del.then(res => {
    console.log(res);
})

接口封装:

  1. 新建一个api文件夹
  2. 按功能、模块等新建对应的js文件
  3. 在内部写对应的封装接口,并导出
import axios from 'axios'
/**
 * 接口名称:
 * 接收参数:
 * 返回参数:
 * 
 */
export const del = (data) => {
    return new Promise((resolve) => {
        axios({
            url: '/api/Admin/del_area',
            method: 'GET',
            params: data
        }).then(res => {
            resolve(res)
        })
    })
}

       4.在需要使用的页面导入调用即可

import { del } from '../api/admin'
del({ id: 0 }).then(res => {
    console.log(res);
})
目录
相关文章
|
2月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
253 59
|
3月前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
237 63
|
1天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
12 3
|
4月前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
146 3
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
124 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
480 4
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
49 3
|
2月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
173 7
|
2月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
483 0