前言
以前写Vue项目的时候都是使用vue-resource做为项目ajax库，在11月份的某一天尤大微博的更新表示ajax的库应该是通用的，放弃了对vue-resource的技术支持，推荐使用axios。
推荐使用Vue-cli工具来创建和管理项目，就算刚开始不熟悉，用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource，但现在已经变了，变成了Axios,不用知道为什么变了，反正这个用起来比那个好一些，用就是了，下面是一些封装axios请求的一些经验，不对之处，还望多多指教！
方法如下
一、创建文件，Vue项目初始化之后，在src目录下再创建一个util工具文件夹，一般就是用来存放一些封装的函数方法，现在让我们在util文件目录下创建一个http.js文件，封装axios方法。
// 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,reject) => {
axios.patch(url,err => {
reject(err);
})
})
}
/**
- put 方法封装
- @param url
- @param data
- @returns {Promise}
*/
export function put(url,reject) => {
axios.put(url,err => {
reject(err);
})
})
}
三、（动态版），axios的拦截器不是必要的，不是每个项目都需要，而且headers里面的Content-Type和Authorization不止一种，这时就需要使用另一种方法。
util/http.js
*/
export function fetch(url,params = {},headers = {
'Content-Type': 'application/json',//设置跨域头部
"Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {
return new Promise((resolve,{
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,data,config)
.then(response => {
resolve(response.data);
},err => {
reject(err.response);
})
})
}
/**
- patch 方法封装
- @param url
- @param data
- @returns {Promise}
*/
export function patch(url,err => {
reject(err.response);
})
})
}
/**
- put 方法封装
- @param url
- @param data
- @returns {Promise}
*/
export function put(url,err => {
reject(err.response);
})
})
}
App.vue(这是在src目录下的程序入口文件)
<style lang="scss"> //这里我使用的是scss
@import '~@/style/style'
