zoukankan      html  css  js  c++  java
  • axios封装

    前言

    作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的...
    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。
    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求。
    关于axios的使用介绍,请看 axios中文说明

    axios封装(该文件名为axios.js)

    /**
     * 引入axios,创建axios实例
     * 封装axios请求拦截器
     */
    import axios from 'axios'
    import router from '@/router'
    import store from '@/store'
    import Lockr from 'lockr/lockr.js'
    import { Message, MessageBox, Loading } from 'element-ui'
    import qs from 'qs'
    
    // 配置请求头
    var instance = axios.create({
        baseURL: 'http://127.0.0.1:9800',
        timeout: 5000,
    });
    
    // 这里我声明了一个全局变量loading,来统一控制请求时的等待数据的loading效果。也可以在实际请求的时候写loading,不过我觉得那样太过繁琐,多了许多代码
    let loading;
    
    // request 拦截器  在请求或响应被 then 或 catch 处理前拦截它们
    instance.interceptors.request.use(config => {
        // 请求时loading效果
        loading = Loading.service({ 
            fullscreen: true,
            lock: true,
            text: '正在加载,请稍等……',
            spinner: 'el-icon-loading'
        });
        // 让每个请求携带token  token的key根据实际情况自定义
        if (store.getters.token) {
            config.data = Object.assign({ token: store.getters.token }, config.data)
        }
    
        // 请求参数序列化
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        if (config.method === 'post' || config.method === "put" || config.method === "delete") {
            config.data = qs.stringify(config.data)
        }
        return config
    }, error => {
        loading.close();
        // 对错误请求的处理
        // 弹出错误消息
        Message({
            showClose: true,
            message: error.message,
            type: 'error'
        })
        return Promise.reject(error);
    })
    // response拦截器  对请求结果做一些处理
    instance.interceptors.response.use(response => {
        loading.close();
        // 这里根据从后端拿到的数据做一些处理,比如不同的code对应不同的处理方式等
    }, error => {
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    })
    
    /**
     * 封装并导出get方法、post方法。
     */
    export default {
        get(url, params) {
            return instance.get(url, params)
        },
    
        post(url, params) {
            return instance.post(url, params)
        }
    }
    

    如果需要对get请求或post请求返回的数据做一些特殊处理,需要写在then()或catch()里面。

    调用说明

    import fetch from '@/utils/axios'
    
    export function example(data){
        return fetch.post(axiosUrl,data)
    }
    

    总结

    以上只是一个简陋的封装,只能说明一个大概的封装思路。写错的地方还望大家多多指点~~~~

  • 相关阅读:
    ExtJS小技巧
    Oracle 表的行数、表占用空间大小,列的非空行数、列占用空间大小 查询
    NPM 私服
    IDEA 不编译java以外的文件
    SQL 引号中的问号在PrepareStatement 中不被看作是占位符
    Chrome 浏览器自动填表呈现淡黄色解决
    批量删除Maven 仓库未下载成功.lastupdate 的文件
    Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)
    Hibernate 自动更新表出错 建表或添加列,提示标识符无效
    Hibernate 自动更新表出错 More than one table found in namespace
  • 原文地址:https://www.cnblogs.com/fanyx/p/8317844.html
Copyright © 2011-2022 走看看