实习打怪之路：axios的简单封装

目录

安装与配置

axios拦截器（interceptors）封装

axios的GET、POST请求的封装

封装后的使用

---

比如你搭建了一个前后端分离的项目，后端基于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
    }
}