前言：
在项目中与后台交互数据这块，通常用的是axios，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。vue是有自己请求数据的方式，vue-resource,把方法抽象出来后，总需要往方法里传 this.$http ,感觉是个超级不爽的设计，在vue2的时候弃用，所以现在大部分还是用的是Axios。
一.axios的特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 （就是有interceptor）
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
二.axios的封装：
1.先下载axios和qs
npm install axios -S
npm install qs --save
qs是一个npm仓库所管理的包。详情使用见npm官网：https://www.npmjs.com/
2.创建http.js，引入axios和qs
2.1环境的切换：
switch (process.env.NODE_ENV) {
case "production":
axios.defaults.baseURL = "http://api.zhufengpeixun.cn";
break;
case "test":
axios.defaults.baseURL = "http://192.168.20.12:8080";
break;
default:
axios.defaults.baseURL = "http://127.0.0.1:3000";
}
设置后就不用来回更换地址测试，更加方便快捷。
2.2设置超时时间和跨域是否允许携带凭证
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
2.3设置请求传递数据的格式（看服务器要求什么格式）
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);
2.4post请求头的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
2.5请求拦截
设置请求拦截器
客户端发送请求 - > [请求拦截器] - > 服务器
TOKEN校验（JWT）：接收服务器返回的token，存储到vuex/本地存储中，每一次向服务器发请求，我们应该把token带上.
axios.interceptors.request.use(config => {
// 携带上token
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
});
2.6响应拦截
axios.interceptors.response.use( //根据你公司后端返回的状态码进行判断。
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
})
最后将axios的方法暴露出去在main.js文件引入。。。
三.api的统一管理
1.将请求接口写在同一个文件中
import axios from './http';
function login() {
return axios.post('/login');
}
export default {
login
}
在页面请求接口的时候将文件引入就行了！
2.接口写在同一个文件中，在main.js中引入
import Vue from 'vue';
import App from './App.vue';
import api from './api/http';
Vue.config.productionTip = false;
Vue.prototype.$api = api;
new Vue({
render: h => h(App),
}).$mount('#app');
在页面使用：
export default {
methods: {
add() {
this.$api.login（）;
}
}
};
大概的就是这样了，具体的还是看公司是怎么要求的！
博客园地址：https://www.cnblogs.com/0314dxj/p/11770120.html
掘金：https://juejin.im/post/5dbaeae8518825644b2b8114
