美文网首页前端微说集IT必备技能
Vue项目引入Axios 插件(封装)

Vue项目引入Axios 插件(封装)

作者: 刘_小_二 | 来源:发表于2020-07-02 15:52 被阅读0次

    首先,在vue-cli项目的src路径下新建一个axios文件夹,在axios文件夹里新建aps.js和request.js,api.js用于写接口,对axios的封装写在request.js里,项目机构如图:

    01.png

    1.axios统一封装

    然后开始统一封装axios, 首先引入axios、qs依赖,引入main.js主要是用于后面对接口进行统一处理,比如调接口的时候,显示loading等。这个main.js根据你个人情况,可加可不加。

        //request.js
        import axios from "axios";
        import qs from "qs";
        import app from "../main.js";
    

    然后创建一个axios实例,这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置:

        /****** 创建axios实例 ******/
        const service = axios.create({
            baseURL: process.env.BASE_URL,  // api的base_url
            timeout: 5000  // 请求超时时间
        });
    

    axios实例创建好之后,开始使用request拦截器对axios请求配置做统一处理,具体如下:

    /****** request拦截器==>对请求参数做处理 ******/
    service.interceptors.request.use(config => {
        app.$vux.loading.show({
            text: '数据加载中……'
        });
     
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
     
        return config;
    }, error => {  //请求错误处理
        app.$vux.toast.show({
            type: 'warn',
            text: error
        });
        Promise.reject(error)
    });
    

    然后是对response做统一处理,代码如下:

    /****** respone拦截器==>对响应做处理 ******/
    service.interceptors.response.use(
        response => {  //成功请求到数据
            app.$vux.loading.hide();
            //这里根据后端提供的数据进行对应的处理
            if (response.data.result === 'TRUE') {
                return response.data;
            } else {
                app.$vux.toast.show({  //常规错误处理
                    type: 'warn',
                    text: response.data.data.msg
                });
            }
        },
        error => {  //响应错误处理
            console.log('error');
            console.log(error);
            console.log(JSON.stringify(error));
     
            let text = JSON.parse(JSON.stringify(error)).response.status === 404
                ? '404'
                : '网络异常,请重试';
            app.$vux.toast.show({
                type: 'warn',
                text: text
            });
     
            return Promise.reject(error)
        }
    );
    
    );
    

    最后,将我们的axios实例暴露出去,整个axios的封装就写完了。

    export default service;
    

    2.axios接口的调用方式

    axios封装好之后,调用就很简单了。我们把接口统一写在api.js文件里。(当然,如果你的业务非常复杂的话,建议把不同业务的api分开放到不同的文件里,这样方便以后维护)。

    注意:post请求参数放在data里面,get请求参数放在params里。

    //api.js
    import service from './request'
     
    export const getPersonInfo = data => {
        return service({
            url: '/person_pay/getpersoninfo',
            method: 'post',
            data
        })
    };
    

    然后在具体的组件中进行调用。

    //index.vue
    import {getPersonInfo} from '../axios/api.js'
    export default {
        created: async function () {
            const params = {
                card_no: '111'
            };
            let res = await getPersonInfo(params);
            console.log(res);
        }
    }
    

    附上项目代码地址: https://github.com/xie991283109/vueCli-test


    api文件下登录模块举例

    import request from '@/utils/request'
    
    export function login(username, password) {
      return request({
        url: '/admin/login',
        method: 'post',
        data: {
          username,
          password
        }
      })
    }
    
    export function getInfo() {
      return request({
        url: '/admin/info',
        method: 'get',
      })
    }
    
    export function logout() {
      return request({
        url: '/admin/logout',
        method: 'post'
      })
    }
    
    export function fetchList(params) {
      return request({
        url: '/admin/list',
        method: 'get',
        params: params
      })
    }
    
    export function createAdmin(data) {
      return request({
        url: '/admin/register',
        method: 'post',
        data: data
      })
    }
    
    export function updateAdmin(id, data) {
      return request({
        url: '/admin/update/' + id,
        method: 'post',
        data: data
      })
    }
    
    export function updateStatus(id, params) {
      return request({
        url: '/admin/updateStatus/' + id,
        method: 'post',
        params: params
      })
    }
    
    export function deleteAdmin(id) {
      return request({
        url: '/admin/delete/' + id,
        method: 'post'
      })
    }
    
    export function getRoleByAdmin(id) {
      return request({
        url: '/admin/role/' + id,
        method: 'get'
      })
    }
    
    export function allocRole(data) {
      return request({
        url: '/admin/role/update',
        method: 'post',
        data: data
      })
    }
    
    

    Request.js 内容举例

    import axios from 'axios'
    import { Message, MessageBox } from 'element-ui'
    import store from '../store'
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 15000 // 请求超时时间
    })
    
    // request拦截器
    service.interceptors.request.use(config => {
      if (store.getters.token) {
        config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
      // Do something with request error
      console.log(error) // for debug
      Promise.reject(error)
    })
    
    // respone拦截器
    service.interceptors.response.use(
      response => {
      /**
      * code为非200是抛错 可结合自己业务进行修改
      */
        const res = response.data
        if (res.code !== 200) {
          Message({
            message: res.message,
            type: 'error',
            duration: 3 * 1000
          })
    
          // 401:未登录;
          if (res.code === 401) {
            MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()// 为了重新实例化vue-router对象 避免bug
              })
            })
          }
          return Promise.reject('error')
        } else {
          return response.data
        }
      },
      error => {
        console.log('err' + error)// for debug
        Message({
          message: error.message,
          type: 'error',
          duration: 3 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service
    
    

    接口地址配置位置:

    02.png

    相关文章

      网友评论

        本文标题:Vue项目引入Axios 插件(封装)

        本文链接:https://www.haomeiwen.com/subject/wlerqktx.html