Http请求

http 请求是管理型页面最常用的功能，web端框架封装了基于JWT的请求方法Request。包含了自动鉴权,请求中间件,错误拦截,统一错误提示等功能。

具体实现可以查看 src/utils/http.js

用法

http.js 封装了常用的POST、GET、PUT、DELETE方法。

POST

这里演示async/await的写法和.then的写法。

async/await 是ES6的语法，您可以花5-10分钟学习掌握async/await 🎊。

import Request from '@/utils/http.js'

// async/await写法
const loadNode = async (node, resolve) => {
  const { id, lx } = node.data
 //接受三个参数,path,data,和header配置(可选)
  const res = await Request.post(
    '/organ/getAsyncOrganTree',  //path
    { id, lx },  // data
    { 'Content-Type': 'application/x-www-form-urlencoded' } //header配置,可不传
  )
  // 获取请求结果后干的事情
   ...
}

// .then写法
const loadNode = (node) => {
  const { id, lx } = node.data
 //接受三个参数,path,data,和header配置(可选)
   Request.post(
    '/organ/getAsyncOrganTree',  //path
    { id, lx },  // data
    { 'Content-Type': 'application/x-www-form-urlencoded' } //header配置,可不传
  ).then(res=>{
    // 获取请求结果后干的事情
    ...
  })
}

GET

import Request from '@/utils/http.js'

const getRole = async () => {
  //接受三个参数,path,data,和header配置(可选)
  const res = await Request.get(
    '/role/get',  //path
    { roleid:'xxx',roleType:'yyy'},  // data
  )
  // 获取请求结果后干的事情
   ...
}

提醒

GET方法的第二个参数，会被自动转换成querystring拼在url上。

如上面例子中:/role/get?roleid=xxx&&roleType=yyy

PUT

import Request from '@/utils/http.js'

const uploadInfo = async (info) => {
 //接受三个参数,path,data,和header配置(可选)
  const res = await Request.put(
    '/organ/info',  //path
    { info:info },  // data
  )
  // 获取请求结果后干的事情
   ...
}

DELETE

import Request from '@/utils/http.js'

const deleteById = async (id) => {
 //接受三个参数,path,data,和header配置(可选)
  const res = await Request.delete(
    '/organ/info/'+id,  //path,一般拼上要删除的业务id
    {}  // data，也可以以JSON形式在body中传递
  )
  // 获取请求结果后干的事情
   ...
}

配置BaseUrl

base表示请求的url的前缀，如下面代码中的 /plat/ 。

您可以更换为实际项目的请求路径，如http://xxx.com/api/

如不指定域名或ip，如/plat/，那么实际上请求的是http://localhost/plat/ 或 http://127.0.0.1/plat/

const service = axios.create({
  baseURL: '/plat/',  
  timeout: 5000, //请求超时时间
  headers: {
    'Content-Type': 'application/json' // 表单提交类型
  }
})

配置请求中间件

框架配置了默认的请求中间件，表示在请求之前，做统一的处理。如在请求的时候注入token,如果您有个性化需求，在请求之前做一些配置或者埋点等，可以在utils/http.js中配置。

service.interceptors.request.use(
  (config) => {
    // 注入token 等其他数据
    const token = getToken() 
    config.headers['Authorization'] = token 
    ... 其他的操作 
    return config  
  },
  (error) => {
    return Promise.reject(error)
  }
)

配置响应中间件

框架配置了默认的响应中间件，表示在请求完成后，对返回值做统一处理。如返回1401跳转到登录页，发生错误的时候，统一弹窗等，可以在utils/http.js中配置。

// 响应中间件
service.interceptors.response.use(
  (response) => {
    if (loadingInstance) {
      loadingInstance.close()
      loadingInstance = null
    }
    if (response.data.code === 1401) { 
      router.push('/login') 
    }
    if (!response?.data?.success && response?.data?.success!==undefined) { 
      ElNotification({ 
        title: '请求失败', 
        message: response.data.msg, 
        type: 'error', 
      }) 
      return Promise.reject(response.data.msg) 
    }
    return response.data 
  },
  (error) => {
    if (loadingInstance) {
      loadingInstance.close()
      loadingInstance = null
    }
    return Promise.reject(error)
  }
)

配置代理

开发模式下，访问本地的服务或者指定的调试服务是非常常见的，前端工程是启动在localhost:端口下，因为跨域的问题，一般无法直接访问服务，我们可以在vite.config.js中配置代理，改变前端的Refer以达到访问的需求。

  server: {
    proxy: {
     // 所有以/plat/请求都会被代理转发到http://192.168.0.125:5173
     // 如/plat/getUser ==>http://192.168.0.125:5173/plat/getUser
      '/plat': {  
        target: 'http://192.168.0.125:5173',
        changeOrigin: true
      }
    }
  }

注意

前端代理配置仅在开发模式下生效

生产环境下有跨域需求可以使用修改nginx配置等方法。

以下是nginx的配置示例，其他容器请参考各自配置方法。

nginx

server{
    location /plat/ {
            proxy_pass http://192.168.0.125:8088/plat/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
      }
}

useRequest

为了方便处理获取返回值，处理loading状态等，统一封装了useRequest,请参考链接。

Http请求 ​

用法 ​

POST ​

GET ​

PUT ​

DELETE ​

配置BaseUrl ​

配置请求中间件 ​

配置响应中间件 ​

配置代理 ​

useRequest ​