以前写Vue项目的时候都是使用vue-resource做为项目ajax库，在11月份的某一天尤大微博的更新表示ajax的库应该是通用的，放弃了对vue-resource的技术支持，推荐使用axios。
推荐使用Vue-cli工具来创建和管理项目，就算刚开始不熟悉，用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource，但现在已经变了，变成了Axios,不用知道为什么变了，反正这个用起来比那个好一些，用就是了，下面是一些封装axios请求的一些经验，不对之处，还望多多指教！
方法如下
一、创建文件，Vue项目初始化之后，在src目录下再创建一个util工具文件夹，一般就是用来存放一些封装的函数方法，现在让我们在util文件目录下创建一个http.js文件，封装axios方法。
二、直接上代码（常规版），代码中有详细的注释
import axios from 'axios' //引用axios import {Promise} from 'es6-promise' //引入Promise // axios 配置 axios.defaults.timeout = 5000; //设置超时时间 axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口 // http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用 axios.interceptors.request.use( config => { const token = sessionStorage.getItem("token"); //获取存储在本地的token config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。 }; if (token) { config.headers.Authorization = "Token " + token; //携带权限参数 } return config; }, err => { return Promise.reject(err); } ); // http response 拦截器（所有接收到的请求都要从这儿过一次） axios.interceptors.response.use( response => { //response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的 if(response.status == 401) { router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数 path: '/login' }) } return response; }, error => { return Promise.reject(error.response.data) }); export default axios; /** * fetch 请求方法 * @param url * @param params * @returns {Promise} */ export function fetch(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * post 请求方法 * @param url * @param data * @returns {Promise} */ export function post(url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) } /** * patch 方法封装 * @param url * @param data * @returns {Promise} */ export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) } /** * put 方法封装 * @param url * @param data * @returns {Promise} */ export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) }
三、（动态版），axios的拦截器不是必要的，不是每个项目都需要，而且headers里面的Content-Type和Authorization不止一种，这时就需要使用另一种方法。
util/http.js
import axios from 'axios' //引用axios import {Promise} from 'es6-promise' //引入Promise // axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。 //^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置 /** * fetch 请求方法 * @param url * @param params * @returns {Promise} */ export function fetch(url, params = {}, headers = { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") }) { return new Promise((resolve, reject) => { axios.get(url, { params: params, headers: headers }) .then(response => { resolve(response.data); }) .catch(err => { reject(err.response) }) }) } /** * post 请求方法 * @param url * @param data * @returns {Promise} */ export function post(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.post(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) } /** * patch 方法封装 * @param url * @param data * @returns {Promise} */ export function patch(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.patch(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) } /** * put 方法封装 * @param url * @param data * @returns {Promise} */ export function put(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.put(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) }
App.vue(这是在src目录下的程序入口文件)