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);
})
目录
相关文章
|
1月前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1月前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
18 0
|
22天前
|
JavaScript
vue 请求拦截器 的响应拦截器有几种?
vue 请求拦截器 的响应拦截器有几种?
|
1天前
|
JavaScript
vue 发送请求时展示进度条——NProgress的简单使用
vue 发送请求时展示进度条——NProgress的简单使用
5 0
|
22天前
|
JavaScript
|
1月前
|
移动开发 前端开发
vue3 Element-Plus封装的el-tree-select的使用
vue3 Element-Plus封装的el-tree-select的使用
49 0
vue3 Element-Plus封装的el-tree-select的使用
|
1月前
|
缓存 负载均衡 JavaScript
vue3中正向代理与反向代理
vue3中正向代理与反向代理
22 1
|
1月前
vue3封装面包屑
vue3封装面包屑
69 0
|
1月前
|
JavaScript
vue封装svg
vue封装svg
34 0
|
1月前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
26 0

热门文章

最新文章