前言
之前写小程序
项目,虽然进行了简易的promise
的封装,代码量小了很多 ,但是对于回调里面的数据处理,很多验证代码都是一样的,代码写起来就很不舒服,
例如
后端返回的数据
正常情况
data: {
result: 1,
metMsg: '', // 正常情况没有错误信息
data: {
// 数据
}
}
复制代码
后端维护了,暂时不能使用
data: {
result: 2, // 表示不正常
metMsg: '告诉前端/用户的错误信息',
data: {}
}
复制代码
需要在每个请求的回调里面都要这样判断
.then(res => {
if(res.data.result == 1) {
// ... 下面的一系列操作
} else {
// ... 错误提示
}
})
复制代码
一个两个可能感觉没什么,但是几十个页面,写这样的重复代码上百次,就非常蛋疼了
非常需要拦截器
这样的东西帮助我解决这个问题,微信request
没有提供拦截器的api,开发者需要自己封装一个拦截器,下次写小程序可以试试写一个
步入正题
以上开发的痛点在axios上可以很好的解决,因为axios提供了拦截器(狗头)
这里 前端同学与后端同学,在项目开始前确定参数,前端就可以进行axios的封装了
例如
data: {
result: , // 1 为正常 2 为不正常 3 ....
metMsg: '为什么不正常的原因',
data: {} // 1 返回data 其他都不返回
}
复制代码
根据规则就可以进行封装了
/utils/index(axios的封装)
import axios from 'axios'
import { Alert } from 'react-native'
//请求拦截器
axios.interceptors.request.use(
function(config) {
// 添加响应头等等设置
config.headers.userToken = 'this is my token'
return config
},
function(error) {
return Promise.reject(error) // 请求出错
}
)
//返回拦截器
axios.interceptors.response.use(
function(response) {
if (response.data.data.result != 1) {
let { retMsg } = response.data.data
// 服务端出现了一些问题的情况下
Alert.alert('温馨提示', retMsg)
// 等等按钮事件
return Promise.reject(retMsg)
} else {
// 服务端一切正常 返回data数据
return response.data
}
},
function(error) {
return Promise.reject(error)
}
)
const defaultData = {}
const defatltUrl = ''
function PostAxios(url = defatltUrl, data = defaultData) {
return axios({
method: 'POST',
url,
data
})
}
function GetAxios(url = defatltUrl, data = defaultData) {
return axios({
method: 'GET',
url,
data
})
}
export default {
PostAxios,
GetAxios
}
复制代码
项目中的发起请求的公共部分,例如header
头等等数据写在请求拦截器
中
项目中的正确回调的公共部分,例如,后端给定的判断 写在返回拦截器
中
这样我们再业务代码里面写请求代码就非常非常方便
项目代码
import response from '/utils/response' // 请求地址
import utils from '/utils/index' // axios的封装
//react
componentDidMount() {
utils.GetAxios(response.listData) // header信息封装在请求拦截器中
.then(res => {// 因为错误情况已经在返回拦截器中进行的处理,所以业务代码不再需要判断正误
this.setState({
city: res.data.data
})
})
.catch(res => {}) // RN进行错误处理....
}
复制代码
日常总结,网上关于axios封装的文章已经很多,不喜勿喷~~~