Vue对axios进行封装简化请求操作

﹏ヽ暗。殇╰゛Y 2022-09-11 12:09 129阅读 0赞

[原文][Link 1]：`https://www.blog.hiyj.cn/article/detail/96`

## 一、[源码链接][Link 2]:`https://gitee.com/mirrors/vue-element-admin/blob/master/src/utils/request.js` ##

## 二、使用示例 ##

*有时更倾向于把需要请求的封装到`api`目录统一管理，但是每个请求直接用axios总归显得有些不太”简洁“，这里看到了vue-admin-element的请求工具感觉很好用，推荐一下*

1.  `api`函数请求示例

// 这里的from请填写自己的路径
    import request from '../utils/request.js';
    
    /** * POST请求，参数"data"为POST请求限定的，参数是js对象类型，JSON格式 */
    export function getMyText() { 
      return request({ 
        url: '/api/getMyText',
        method: 'post',
        data: { 
          id: 110
        }
      })
    }
    
    /** * GET请求，参数"params"为GET请求限定的，参数是js对象类型，JSON格式 */
    export function getMyLove() { 
      return request({ 
        url: '/api/getMyLove', 
        method: 'get',
        params: {  id }
      })
    }

1.  `api`函数使用示例

getMyText().then(rsp => { 
       console.log(rsp.data)
    })
    
    getMyLove().then(rsp => { 
       console.log(rsp.data)
    })

## 三、工具源码 ##

import axios from 'axios' // 主要是对这个的封装
    import {  MessageBox, Message } from 'element-ui' // 请求返回码不正确时可以使用element的冒泡提示
    
    // create an axios instance
    const service = axios.create({ 
      baseURL: process.env.VUE_APP_BASE_API, // 完整url = 服务根url + 请求url拼接的； 服务根url来源于全局变量；请求url来源于api函数的url参数。
      // withCredentials: true, // 跨域请求时发送cookie
      timeout: 5000 // 超过5s请求超时
    })
    
    // request interceptor
    service.interceptors.request.use(
      config => { 
        // 请求之前的设置
        // 添加请求头信息，可以根据需要自行选择，也可以不要
        // 例如请求头加入“X-Token”键 
        config.headers['X-Token'] = "自己的请求头value"
        return config
      },
      error => { 
        // 请求错误时
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )
    
    // response interceptor
    service.interceptors.response.use(
      /** * If you want to get http information such as headers or status * Please return response => response */
    
      /** * Determine the request status by custom code * Here is just an example * You can also judge the status by HTTP Status Code */
      response => { 
        const res = response.data
        // 在这里限定了返回的必须要有返回码——code键，且返回码不为20000时视为请求结果错误的 
        if (res.code !== 20000) { 
          // 这是element-ui的错误信息提示
          Message({ 
            // 如果返回值有键-message，则错误信息是自定义的返回信息值，否则只提示'Error'
            message: res.message || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          // 你也可以加入其它一些返回码的判断，也可以根据某些返回码跳转到某些页面
          return Promise.reject(new Error(res.message || 'Error'))
        } else { 
          return res
        }
      },
      error => { 
        console.log('err' + error) // for debug
        Message({ 
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

[Link 1]: https://www.blog.hiyj.cn/article/detail/96
[Link 2]: https://gitee.com/mirrors/vue-element-admin/blob/master/src/utils/request.js