•基于 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; },}