目录
比如你搭建了一个前后端分离的项目,后端基于SSM框架,前端基于vue全家桶,数据库使用的MySQL。前后端分离的项目交互时,最重要的就是接口(API),而axios正好可以对接口进行封装,所以从而使前端调用后端接口时非常方便,可增加复用性,直接调用就好,不用再重新编写重复代码。
安装与配置
使用npm或者cnpm安装axios
npm install axios
封装接口时我们需要用到qs插件,qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。
npm install qs
我们在项目的src目录下新建一个utils自己的工具类文件夹,并在此目录下新建base.js、api.js
axios拦截器(interceptors)封装
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.header['Content-Type']='application/x-www-form-urlencoded'; return config; }, error=>{ 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;
axios的GET、POST请求的封装
import axios from './base' import QS from 'qs'; //get、post请求(带参)的封装 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 "./api"; methods: { async function getList() { let res = await getData(); console.log(res) this.listGood=res.data } }
实习打怪之路:axios的简单封装
最新推荐文章于 2022-10-06 14:35:09 发布