做为出入vue的小萌新,我在写请求的时候,也是坚决果断写了ajax,结果确定是不行的...
Vue 本来有一个官方推荐的 ajax 插件 vue-resource,可是自从 Vue 更新到 2.0 以后,官方就再也不更新 vue-resource。
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求。
关于axios的使用介绍,请看 axios中文说明vue
/** * 引入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()里面。ios
import fetch from '@/utils/axios' export function example(data){ return fetch.post(axiosUrl,data) }
以上只是一个简陋的封装,只能说明一个大概的封装思路。写错的地方还望你们多多指点~~~~ajax