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);
})
目录
相关文章
|
27天前
|
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版本创建项目的配置文件配置方法。
30 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
10天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
116 4
|
14天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
29 3
|
22天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
166 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
28 0
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
131 0
重读vue电商网站45之项目优化上线
|
11天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex