axios的简单封装处理

目录

安装与配置

base.js

api.js

核心代码段

---

最近搭建了一个前后端分离的项目，后端基于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的内容，网上有很多模板，大家可自行粘贴复制

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
    }
}