Axios - 基于 Vue + Element 请求封装

╰+攻爆jí腚メ 2022-10-16 01:55 327阅读 0赞

## 前言 ##

> 当然，其他 `React` 或 `UI` 框架可作为参考。

本文基于 `Axios` 请求库，封装全局能通过 `this（挂载到Vue实例上）` 全局调用的请求（**非集中式 API 管理模式** ）。

其中，包含以下功能：

*  baseURL
 *  超时时间
 *  headers
 *  开发环境切换
 *  请求结果处理

// 最终全局调用方式(以POST请求为例)
    // 只需关心调用成功(状态码正确)处理
    this.$post('v1/user_admin/login',
    {  phone: '13191835102', password: 'wjb20' })
    .then((response) => { 
         console.log(response)
    })

## 一、安装 Axios ##

这里不多做介绍

npm install axios

## 二、新建 http.js ##

> 在 `src` 下新建一个 `utils` 文件夹，创建 `http.js` 文件，命名无所谓。
> 
> > 该示例只封装了 `POST` 请求，其他请求类似。

在该文件中，写入以下代码，请根据 **路径及命名** 随机应变。

// axios
    import axios from 'axios'
    
    // 引入路由(对异常状态码做出跳转页面处理)
    // 例如 [登录已过期]: 拦截到后跳转到登录页面
    import router from '../router/index'
    
    // 引入 elementui 提示框组件(根据你的UI框架来)
    // 例如 [登录已过期]: 需要给用户弹出提示框来告知用户
    import {  Message, MessageBox } from 'element-ui'
    
    // 获取token/uid(一般都会在请求携带token/uid等信息)
    // [如果你的服务端接口没有做这件事那不需要]
    var token = localStorage.getItem('token')
    var uid = localStorage.getItem('uid')
    
    // 开发环境切换(基本分为开发环境与线上环境)
    // 用一个标识很轻松就能切换服务器接口地址
    var debug = true//标识
    var baseURL//baseURL
    if(!debug) { 
        baseURL = 'https://api.xxx.com/'//线上接口
    }else{ 
        baseURL = 'https://dev.xxx.com/'//线下接口
    }
    
    // 配置请求基本信息(详见文档 | 这里只做了简单的配置)
    // baseurl / 超时时间(5秒) / 
    axios.defaults.baseURL = baseURL
    axios.defaults.timeout = 7000
    
    /** * POST - 请求封装 * @param url * @param data * @returns Promise */
    export function post(url, data = { }){ 
        
        // headers(携带token)
        axios.defaults.headers.common['token'] = token
        
        // data 公共参数设置(例如token)
        // 如果你的服务端接口没有规定则不需要以下操作
     	// [每次请求接口 data 数据必须携带的参数]
        // data.uid = uid
        // data.token = token
        // data.model = 'Browser'
        // data.platform = 'H5'
    	
        return new Promise((resolve, reject) => { 
          axios.post(url, data)
            
            // 请求成功回调
            .then(response => { 
    
                // 拿到结果先对状态码进行对应处理(调用下方函数)
                // 传入状态码给处理函数即可(code)
                serveCode(response.data.code)
                
                // ok(正常返回)
                resolve(response.data);
            },
            
            // 请求失败回调
            err => { 
            
            	// 请求失败后(做一个弹出框提示用户)
            	// 当然也可以做其他操作
                Message({ 
                    showClose: true,
                    duration: '10000',
                    message: '请求失败(可能是网络问题)',
                    type: 'error'
                  })
                reject(err)
            })
        })
    }
    
    
    /** * GET - 请求封装（与POST请求一样 | axios.get） * @param url * @param data * @returns Promise */
    // ...
    
    
    
    /** * DELETE - 请求封装（与POST请求一样 | axios.delete） * @param url * @param data * @returns Promise */
    // ...
    
    
    
    /** * 状态码处理 * @param {Number} code - 状态码 * @return void */
    function serveCode(code) { 
        switch(code){ 
            
            // 无权限访问,请尝试重新登录
            case 1001 :
    			
    			// elementUI 提示框
                MessageBox.alert('为了您的账号安全，请重新登录系统', '登录已过期', { 
                    type: 'error',
                    confirmButtonText: '我知道了',
                    showClose: false,
                    center: true
                  })
    			  
    			  // 用户点击确认框
    			  .then(() => { 
                    
                    // 做一些事情...
                    // 例如登录已经过期了(清除缓存)
                    // localStorage.removeItem('token')
                    // localStorage.removeItem('uid')
                    
                    // 最后跳转到登录页
                    // router.push('/login')
                  
                  })
            break;
    		
    		// 其他状态码情况处理
    		// ...
    		
        }
    }

## 三、挂载到 Vue 实例 ##

> 该步骤会获得全局 `this` 调用请求。

打开根目录下的 `main.js` ，加入以下代码：

// 引入封装好的请求(注意路径)
    import {  post } from './utils/http'
    // 如果存在多个请求封装则以下方式引入
    // import { post, get } from './utils/http'
    
    
    // 挂载到 Vue 实例
    Vue.prototype.$post = post
    // 如果存在多个请求封装则以下方式挂载
    // [或者: 将这些零散的请求归类在一个对象上访问]
    // [例如: this.$http.post() | this.$http.get()]
    // Vue.prototype.$post = post
    // Vue.prototype.$get = get

## 四、使用方法 ##

this.$post('v1/user_admin/login',
    {  phone: '13191835102', password: 'wjb20' })
    .then((response) => { 
         console.log(response)
    })

## 五、写在后面 ##

你无需考虑，接口返回数据不正常的情况（因为出现状态码不正常的情况下会自动做出处理），当然也没有配置拦截器，主要以简洁为主。

**其他示例：**

import axios from 'axios'
    // import qs from 'qs'//序列化post类型数据
    
    // router
    import router from '../router/index'
    
    // alert
    import {  Message, MessageBox } from 'element-ui'
    
    // data加密函数
    import {  createSign } from '../lib/createSign'
    
    // 环境切换
    
    var debug = true//标识
    
    var baseURL//baseURL
    
    if(debug) { 
    
    
    
        // baseURL = 'http://192.168.124.169:8080/'// 线上
        // baseURL = 'http://192.168.124.7:8080/'// 线上
    
        baseURL = "https://iot.lkxdiot.com/"
    
    }else{ 
        
        // baseURL = 'http://192.168.124.7:8080/'// 线上
        
        baseURL = 'https://api.lkxdiot.com/'// 线下
    
        // baseURL = "http://192.168.124.7:8080" //
    }
    
    
    // baseurl / 超时时间(5秒) / headers(携带token)
    axios.defaults.baseURL = baseURL
    axios.defaults.timeout = 7000
    
    
    /** * 封装post请求 * @author 王佳斌 * @param url * @param data * @returns {Promise} */
    
    export function post(url, data = { }, isExport = { }){ 
        
        // 设置头
        axios.defaults.headers.common['token'] = localStorage.getItem('token')
    
         // 设置token
         data.token = localStorage.getItem('token')
        
         // 设置uid
         data.uid = localStorage.getItem('uid')
    
         // 设置level
         data.level = localStorage.getItem('level')
         
         data.model = "Browser"
         
         data.platform = 'H5'
    
         data.company_id = localStorage.getItem('company_id')
    
        // 判断token是否为空
        if(localStorage.getItem('token') != '')
        { 
            
            data = createSign(localStorage.getItem('token'), data)
            
        }
    
        return new Promise((resolve, reject) => { 
          axios.post(url, data,isExport)
            
            // success
            .then(response => { 
    
                // 根据状态码进行对应处理
                serveCode(response.data.code)
                // ok
                resolve(response.data);
    
            },
            
            // error
            err => { 
                Message({ 
                    showClose: true,
                    duration: '10000',
                    message: '通信失败(可能是网络问题)',
                    type: 'error'
                  })
                reject(err)
            })
        })
    }
    
    
    /** * 服务器返回-状态码处理 * @author 王佳斌 * @param {Number} code - 状态码 * @return void */
    function serveCode(code) { 
        switch(code){ 
            
            // 无权限访问,请尝试重新登录
            case 1001 :
                MessageBox.alert('为了您的账号安全，请重新登录系统', '登录已过期', { 
                    type: 'error',
                    confirmButtonText: '我知道了',
                    showClose: false,
                    center: true
                  }).then(() => { 
                    
                    // 清除缓存(token/uid)
                    localStorage.removeItem('token')
                    localStorage.removeItem('uid')
    
                    // 跳转到登录页
                    router.push('/login')
                  })
            break;
        }
    }