axios二次封装
项目中对axios的二次封装:
1、基础路径、超时配置
2、统一设置请求头信息
3、统一处理错误信息
import axios from 'axios'
import qs from 'qs'
const ajax = axios.create({
//基础路径,发请求的时候,路径当中会出现api,不用你手写
baseURL: 'http://localhost:xxxx',
//请求时间超过5秒
timeout: 50000
})
ajax.interceptors.request.use(config => {
// 开启进度条
// 设置post请求的参数格式
if (config.method === "post") {
config.data = qs.stringify(config.data);
}
// 设置token
let token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = token;
} else {
return config;
}
//config是个配置对象,对象里面有一个属性很重要,headers请求头
return config
}, error => {
return Promise.reject(error)
})
ajax.interceptors.response.use(res => {
//成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情。
return res.data.data
}, err => {
// 做一个统一错误处理等,或者404等响应
// 例如做一个message弹出提示,或者modal弹窗
// Modal.error(xxx)
return Promise.reject(err)
})
export default ajax
uview项目请求二次封装
对于uniapp uview项目请求二次封装:
1、初始化请求配置
import config from '@/common/config'
// 初始化请求配置
uni.$u.http.setConfig((defaultConfig) => {
/* defaultConfig 为默认全局配置 */
defaultConfig.baseURL = config.baseUrl /* 根域名 */
return defaultConfig
})
module.exports = (vm) => {
require('./requestInterceptors')(vm)
require('./responseInterceptors')(vm)
}
2、请求拦截
module.exports = (vm) => {
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
config.data = config.data || {}
// 可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中
return config
}, (config) => // 可使用async await 做异步操作
Promise.reject(config))
}
3、响应拦截
module.exports = (vm) => {
uni.$u.http.interceptors.response.use((response) => {
const data = response.data
// 自定义参数
const custom = response.config?.custom
return data.result || {}
}, (response) => { /* 对响应错误做点什么 (statusCode !== 200)*/
return Promise.reject(response)
})
}