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)
}

总结

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