axios二次封装以及uview项目请求二次封装

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