axios封装处理接口

更新时间：2022-10-01 08:50:19

介绍

最近搭建了一个前后端分离的项目，后端基于SSM框架，前端基于vue全家桶，数据库使用的MySQL。前后端分离的项目交互时，最重要的就是接口（API），而axios正好可以对接口进行封装，从而使前端调用后端接口时非常方便。

开始

安装

npm install axios

封装接口时我们需要用到qs插件，qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

npm install qs

接下来在src目录下新建utils文件，并在此目录下新建base.js以及api.js。

axios封装处理接口

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请求（带参），这里的api是在index.js中已经配置好的后端地址。

axios封装处理接口

assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'ip地址/',  // 后台api
        changeOrigin: true,  //是否跨域
        https: true,
        pathRewrite: {
          '^/api': ''   //需要rewrite的,
        }
      }
    }
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
    }
}

上一篇 : ：VUE管理系统分页功能下一篇 : 前后端分离项目实战（Vue+SSM）

axios封装处理接口

介绍

开始

相关阅读

推荐文章