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


总结

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