vue项目中接口统一分装(vue二次分装axios）
2019-04-12 本文已影响183人
石木君
什么是 axios？
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
PS:防止XSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
ps: axios文档
使用axios
$ npm install axios
接下来是不是就该这样引入vue项目中使用了吧
import Vue from 'vue'
import axios from 'axios'
Vue.use(Axios, axios)
NO NO 我们正式开始axios的正式分装
- 首先我们在src目录下新建两个文件加，models、pluging
目录结构
- 接着我们在pluging文件夹下面新建一个 httpClient.js的文件。好了，我们可以开始引用axios了。
import axios from 'axios';
import store from '@/store'; // vux使用，这里不做介绍。
import router from '@/router'; // 路由，这里为什么引入，接着往下看
import qs from 'qs'; // qs库对数据进行编码
import { Message } from 'element-ui'; //消息提示，因为项目使用的是element-ui，所以直接引入使用接可以。
下面是完整的 httpClient.js 文件
import axios from 'axios';
import store from '@/store';
import router from '@/router';
import qs from 'qs';
import { Message } from 'element-ui';
const instance = axios.create({
baseURL: http://xxx-api.com/, // 接口的头部地址例如：根据自己的项目填写
headers: {
Accept: 'application/json',
},
paramsSerializer(params) {
return qs.stringify(params, {
encode: true,
arrayFormat: 'brackets',
skipNulls: true,
});
},
});
// ----------自定义请求拦截器----------------
instance.interceptors.request.use(
//--在发送请求之前做些什么
(config) => {
store.commit('SET_LOADING', true); // vuex使用，element Loading 加载
return config;
},
//-- 对请求错误做些什么
(error) => {
store.commit('SET_LOADING', false);
return Promise.reject(error);
},
);
// ----------自定义响应拦截器----------------
instance.interceptors.response.use(
//-- 对响应数据做点什么
(response) => {
store.commit('SET_LOADING', false);
return response;
},
//-- 对响应错误做点什么
(error) => {
store.commit('SET_LOADING', false);
//-- 对各种错误处理
if (error.response) {
if (error.response.status === 401) {
router.replace(store.state.authUrl || '/auth/login');
//-- 跳转到登录页面，因为项目是前后端在一块，所以这块两个登录页面，一个在vuex里面存着，动态变化。
} else if (error.response.status === 403) {
Message.error('自定义错误信息');
router.replace(store.state.authUrl || '/auth/login');
} else if (error.response.status === 500) {
Message.error('服务器异常');
} else if (error.response.status === 400) {
Message.error('自定义错误信息');
} else if (error.response.status === 404) {
Message.error('未找到请求的资源');
} else {
Message.error('自定义错误信息');
}
}
return Promise.reject(error);
},
);
export default instance;
- 接下来到最最重要到时候了，还记得我们之前建立的models文件夹吗，对，要用到它了，首先我们在里面新建一个js文件，index.js.
- 接下来在models 新建接口文件，例如我们新建一个auth.js
// 引入分装好的 axios
import httpClient from '@/plugins/httpClient'
export default {
// 登录接口
login(data) {
return httpClient.post('auth/user/xxxx', { user: { ...data } });
},
// 退出登录的接口
logout() {
return httpClient.delete('auth/user/xxxxx');
},
// 获取用户信息的接口。
info() {
return httpClient.get('auth/user/xxxx');
},
};
- 好了接下来在 index.js 文件里面引入它
import auth from './auth'; // 用户登录与信息
export default {
auth,
};
export default models;
- 很好，完成登录接口的分装，接下来在 models 分装更多的接口，一个接口一个js文件
import auth from './auth'; // 用户登录与信息
import sss from './sss'; // sss接口
import aaa from './aaa'; // aaa接口
export default {
auth,
sss,
aaa,
};
export default models;
- 接口已经完美分装好了，接下来就是使用了，在main.js里面引入它
import Vue from 'vue';
import App from '@/App.vue';
import models from '@/models';
Vue.prototype.$models = models;
- 完美，接下来就是在页面使用这些接口了。
// 在 methods 钩子里面 新建一个 login 函数
login() {
const account = {
name: '',
password: '',
},
// 调用 login 接口登录，
const data = this.$models.auth.login(account);
console.log(data); // data获取到登录信息。
},
