安装与配置

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

axios的简单封装处理相关推荐

axios的简单封装
前言在每次使用原装的axios发送 http请求时,如果需要token验证,则都需要创建拦截器,添加'token'请求头,或者在config中具体的请求体中添加,是一个非常麻烦的事情. 遇到401, ...
axios的简单封装和http请求实践
对axios做一个简单的封装和实现的思路,主要实现: 统一捕获接口报错(拦截器) 基础验证 (auth) import axios from 'axios' // 最基本的全局配置 const ins ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
vue2简单封装highcharts
vue2简单封装highcharts 前言一.vue文件(high-chart.vue) 二.highcharts配置(default-options.js) 三.包裹highcharts的div宽 ...
axios二次封装之get请求
今天因为项目上跟后端联调接口时 , 有一个 get 请求 , 需要携带三个参数给后端但是原本项目内简单封装 axios 的 get 请求就显得不那么简便了 (使用了在 url 后面进行拼接携带参数的 ...
Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html
简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
【JDBC】实现对JDBC 连接的简单封装
package util;import java.sql.Connection; import java.sql.DriverManager;/**** 实现对JDBC 的封装* @author mq ...

axios的简单封装处理

安装与配置

base.js

api.js

核心代码段

axios的简单封装处理相关推荐

最新文章

热门文章