详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

•基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用
•vue2.0之后，就不再对 vue-resource 更新，而是推荐使用 axios，本项目也是使用 axios
•功能特性
•在浏览器中发送 XMLHttpRequests 请求
•在 node.js 中发送 http请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换 JSON 数据
•客户端支持保护安全免受 CSRF/XSRF（跨站请求伪造） 攻击

封装使用

建议拆分三个文件

•src
 -> service
 ---->axios.js （axios 配置，拦截器、统一 url）
---->index.js （接口方法，里面调用 api 方法，供页面级调用）
---->api
 ------->index.js（api 方法，里面调用后端提供的接口，供接口方法调用）

axios.js 基本配置

'use strict';import axios from 'axios';// 自动识别接口使用开发环境地址（开发环境地址做了 proxyTable 代理，故设置为空）或线上地址axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? process.env.API_ROOT : '';// 开发环境直接打包测试// axios.defaults.baseURL = '';axios.interceptors.request.use(config => { return config;}, error => { console.log(error); return Promise.reject(error);});axios.interceptors.response.use(res => { const apiRes = res.data; return apiRes;}, async error => { console.dir(error); return Promise.reject(error);});export default axios;api/index.js 调用后端提供的接口import Ax from '@/service/axios';import qs from 'qs';export default { fetchBlog (reqData) {  return Ax.get('/krryblog/blog/getBlog', {params: reqData}); }, addBlog (reqData) {  return Ax.post('/krryblog/blog/addBlog', qs.stringify(reqData)); }, updateBlog (reqData) {  return Ax.post('/krryblog/blog/updateBlog', qs.stringify(reqData)); }, deleteBlogCover (id, reqData) {  return Ax.post(`/krryblog/blog/deleteBlogCover/${id}`, qs.stringify(reqData)); },};

index.js 接口方法（调用 api）

import Api from './api';export async function getBlog(reqData) { let res = await Api.fetchBlog(reqData); return res;},export async function addBlog (reqData) { let res = await Api.addBlog(reqData); return res;},export async function updateBlog (reqData) { let res = await Api.updateBlog(reqData); return res;},export async function deleteBlogCover (id, reqData) { let res = await Api.deleteBlogCover(id, reqData); return res;},

页面调用

接下来就可以愉快地在页面调用了

import { getBlog } from '@/service'export default { data() {  return {   tableData: [],   pageIndex: 1,   pageSize: 9  } }, created() {  this.getList(); }, methods: {  async getList() {   let { result } = await getBlog({    pageIndex: this.pageIndex,    pageSize: this.pageSize   });  this.tableData = result.data; },}