“这是我参与8月更文挑战的第17天,活动详情查看:8月更文挑战”
本文介绍接口封装的思路及代码实现。
首先说一下接口统一管理的问题,在中大型项目中,为了请求的复用,我们可以将所有的代码放到一起集中管理。在src下新建一个api目录,用于存放所有的接口
src/api
util.js
user.js
xxx.js
httpClient.js #工具函数
思路
-
请求拦截
- 在请求头添加一些参数,例如token,uid等
- 判断用户登录状态,如果没有登录,直接跳转登录
- 处理请求数据转换发送请求的数据格式,json→urlencoded (可选的)
-
响应拦截
-
判断后端响应的业务状态码,进行不同的处理
- 例如用户登录状态过期,直接跳转登录
- 统一的报错提示
-
原理
我们使用axios的拦截器实现请求封装。原理如下:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
具体的代码实现
import axios from 'axios'
import qs from 'qs'
//配置统一的前缀
const baseURL = '/api'
const instance = axios.create({
baseURL,
timeout: 1000 * 60
})
// 添加请求拦截器
instance.interceptors.request.use(
function(config) {
addHeader(config)
formatReq(config)
return config
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
function addHeader(config) {
const TOKEN = 'Beard good'
const uid = '18181881'
config.headers.token = TOKEN
config.headers.uid = uid
}
function formatReq(config) {
// 如果参数类型不是formdata,把请求参数转化为x-www-urlencoded
if (!(config.data instanceof FormData)) {
config.data = qs.stringify(config.data)
}
}
// 添加响应拦截器
instance.interceptors.response.use(
function(response) {
// 对响应数据做点什么
handleResponseCode(response)
return response
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
const CODE={
SUCCESS:2000,
AUTH_ERR:4000
}
function handleResponseCode(response){
console.log("handleResponseCode -> response", response)
if(typeof response.data !=='object')return
const code=response.data.code
if(!code)return
switch (code) {
case CODE.SUCCESS:
console.log('success')
return
case CODE.AUTH_ERR:
console.log('auth error,跳转登录')
return
default:
console.log('error',response.config.url,response.data.desc)
return
}
}
export default instance
使用封装之后的函数
在src/api/user.js
中使用封装的api,代码如下
import http from './httpClient'
//获取用户信息
const getProfile=(id)=>http.request({url:'xxx',params:{id}})
//登录
const login=(req)=>http.request({url:'xxx',method:'post',data:req})
export const USER_API={
login,
getProfile
}
在具体的组件中引入user.js
并调用对应的接口即可,vue中和react中都可以使用
import {USER_API} from 'src/api/user.js'
USER_API.login()