目录
最近搭建了一个前后端分离的项目，后端基于SSM框架，前端基于vue全家桶，数据库使用的MySQL。前后端分离的项目交互时，最重要的就是接口（API），而axios正好可以对接口进行封装，从而使前端调用后端接口时非常方便。
安装与配置
使用npm或者cnpm安装axios
npm install axios
封装接口时我们需要用到qs插件，qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。
npm install qs
我们在项目的src目录下新建一个utils文件夹，并在此目录下新建base.js、api.js
base.js
注意：关于base.js的内容，网上有很多模板，大家可自行粘贴fuzhi
import axios from 'axios' import qs from 'qs' axios.interceptors.request.use( config => { config.method === 'post' ? config.data = qs.stringify({...config.data }) : config.params = {...config.params }; config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; return config }, err => { console.error('axios request 请求出错：', err) return Promise.reject(err) } ) axios.interceptors.response.use( response => { if (response && response.data) { let data = response.data || {} if (data && (data['code'] === "201")) { //登录失效 } } return response }, err => { console.error('axios response 请求出错：', err) let res = { success: false, message: '系统错误，请重试！' } return Promise.resolve(res) } ) export default axios
api.js
这里分别是GET请求、POST请求（带参）
import axios from '../utils/base' import QS from 'qs' export const getData = data => { return axios({ url: '/api/findAllRoomVue', method: 'get', }) }; export function Login(data) { return axios({ url: '/api/loginClient', method: 'post', data: QS.stringify(data) }) }
核心代码段
import { getData } from "../utils/api.js"; methods: { async getList() { let res = await getData(); console.log(res) this.listGood=res.data } }
