VUE项目利用Axios实现好用的API层请求接口封装
讲之前先了解下axios的使用
//无参数时 方式一axios({ method: 'get', url: '/ulr' })
//无参数时 方式二axios.get('/url')
//有参数时 方式一 请求的地址实际为 localhost:8080/url?id=12axios({ method: 'get', url: 'url', params: { id: 7955201314 } })
//有参数时 方式二 请求的地址实际为 localhost:8080/url?id=7955201314axios.get('/url', {params: {id: 7955201314}})
POST请求: 主要提交表单数据和上传文件
let data = {}let config = { headers: { "author": "shenxiaobu" }}//方式一const options = Object.assign({ method: 'post', url: '/url', data: data }, config)axios(options) //方式二axios.post('/url',data,config)
//其中 data可以有两种格式form-data(图片上传,文件上传) applicition/json（目前比较流行）//上面两种方法 都是 appliction/json格式
//form-data方式let formData = new FormData()let data = { id: 7955201314}for (let key in data) { formData.append(key, data[key])}const options = Object.assign({ method: 'post', url: '/url', data: formData }, config)axios(options) //该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式
put请求：对数据全部进行更新
****该请求和post类似，只是请求方法不同
patch请求：只对更改过的数据进行更新
****该请求和post类似，只是请求方法不同
delete请求：删除请求(参数可以放在url上也可以和post一样放在请求体中)
//方式一 参数在url params很重要 请求的地址实际为 localhost:8080/url?id=12axios.delete('/url', {params: {id: 7955201314}})
//方式二 参数在请求体中 将params改为 data就行axios.delete('/url', {data: {id: 7955201314}})
我们常用的请求方式一般就get 和 post ，其中post是使用最频繁的。我们讲下vue项目如何使用API层使代码结构清晰，使用方便。目录结构如下
—api //api 文件夹
——modules //模块文件夹
———system-api.js //系统管理相关接口文件
——common-axios.js //请求拦截和响应拦截处理处 对外暴露一个 axios
——index.js //对外暴露module模块下的方法
common-axios.js
import axios from "axios"const service = axios.create({ baseURL: baseUrl, timeout: 8000})//请求拦截service.interceptors.request.use(config => { //... do something return config}, error => { return Promise.reject(error)})//响应拦截service.interceptors.response.use(response => { const res = response.data // ... do something return res},error => { return Promise.reject(error)})export default service
system-api.js
import request from "../common-axios.js"//post请求export function getList(data = {}, config = {}) { return request.post("/url", data, config)}//或者export function getList(data = {}, config = {}) { const options = Object.assign({ method: "post", url: "/url", data }, config) return request(options)}
//get请求export function getData(data = {}) { return request.get("/url", {params： data})}//或者export function getData(data = {}, config = {}) { const options = Object.assign({ method: "get", url: "/url", params: data }, config) return request(options)}
index.js
import * as systemApi from "./modules/system-api.js"export { systemApi }
调用接口
import {systemApi } from "@api" //@ 别名用法，详细参考别名配置那里let data = { name: "qxj", color: "pink"}
let config = { headers: { "type": "799love7951314" } //timeout等 .... 一系列 axios 可以配置的参数}systemApi.getList(data,config)systemApi.getData(data,config)
这样就实现了代码结构清晰，使用方便的目的，但是此时是存在不足的，比如点击一个按钮发送请求时，当网络不好，用户疯狂点击按钮时，就会疯狂发送请求，从而影响用户体验及系统性能。所以还需要在原先的基础上升级改造。
在api目录下新增一个global-request.js文件，代码如下
import axiosRequest from "./common-axios"//用来存储请求接口的状态const GLOBAL_REQUEST_OBJ = {}function request(name, params) { return new Promise((resolve, reject) => { if (GLOBAL_REQUEST_OBJ[name] && GLOBAL_REQUEST_OBJ[name] !== "ready") { return } GLOBAL_REQUEST_OBJ[name] = "requesting" axiosRequest(params).then(result => { GLOBAL_REQUEST_OBJ[name] = "ready" resolve(result) }).catch(err => { GLOBAL_REQUEST_OBJ[name] = "ready" reject(err) }) })}//兼容axios另一种请求方式["get", "post"].forEach(type => { request[type] = (name, ...params) => { console.log(name) return new Promise((resolve, reject) => { if (GLOBAL_REQUEST_OBJ[name] && GLOBAL_REQUEST_OBJ[name] !== "ready") { return } GLOBAL_REQUEST_OBJ[name] = "requesting" axiosRequest[type].apply(this, params).then(result => { GLOBAL_REQUEST_OBJ[name] = "ready" resolve(result) }).catch(err => { GLOBAL_REQUEST_OBJ[name] = "ready" reject(err) }) }) }})
export default request
然后system-api.js下的请求，改为global-request这个暴露出来的请求即可
修改后的system-api.js
import globalRequest from "../global-request.js"//post请求export function getList(data = {}, config = {}) { return globalRequest.post("systemGetList", "/url", data, config)}//或者export function getList(data = {}, config = {}) { const options = Object.assign({ method: "post", url: "/url", data }, config) return globalRequest("systemGetList", options)}
//get请求export function getData(data = {}, config = {}) { const options = Object.assign({params： data}, config) return globalRequest.get("systemGetData", "/url", options)}//或者export function getData(data = {}, config = {}) { const options = Object.assign({ method: "get", url: "/url", params: data }, config) return globalRequest("systemGetData", options)}
这样既可实现防止重复请求问题，无需在业务代码中判断。nice
