uniapp uivew2.0接口封装

uniapp yekong 1843℃

api文件

config/api.js

const http = uni.$u.http

import qs from 'qs'

export const getcity = (id, config = {}) => http.get('/mock/20/base/city', config)

config.js

config/coonfig.js

var configs = {
    baseUrl: 'http://mock.wanjunshijie.com'
}

export default configs


request.js

config/request.js

// 此vm参数为页面的实例,可以通过它引用vuex中的变量
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = 'http://mock.wanjunshijie.com'; /* 根域名 */
        return config
    })

    // 请求拦截
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        config.header['Content-Type'] = config.header['Content-Type'] ? config.header['Content-Type'] :
            'application/json'
        config.data = config.data || {}
        // 根据custom参数中配置的是否需要token,添加对应的请求头
        if (config?.custom?.auth) {
            if (uni.getStorageSync('token')) {
                // 可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中
                config.header.Authorization = uni.getStorageSync('token')
            } else {
                // uni.redirectTo({
                //  url: '/pages/login/login'
                // })
            }
        }
        return config
    }, config => { // 可使用async await 做异步操作
        return Promise.reject(config)
    })

    // 响应拦截
    uni.$u.http.interceptors.response.use((response) => {
        /* 对响应成功做点什么 可使用async await 做异步操作*/
        const data = response.data
        // 自定义参数
        // const custom = response.config?.custom
        if (data.code != 0) {
            // 如果没有显式定义custom的toast参数为false的话,默认对报错进行toast弹出提示
            if (data.msg) {
                uni.$u.toast(data.msg)
            }
            // 如果需要catch返回,则进行reject
            // if (custom?.catch) {
            //  return Promise.reject(data)
            // } else {
            //  // 否则返回一个pending中的promise,请求不会进入catch中
            //  return new Promise(() => {})
            // }
            if (data.code == 401) {
                uni.clearStorageSync()
                uni.$u.route('/pages/login/login')
            }
        }
        return data === undefined ? {} : data
    }, (response) => {
        // 对响应错误做点什么 (statusCode !== 200)
        if (response.statusCode == 401) {
            uni.$u.route('/pages/login/login')
        }
        return Promise.reject(response)
    })
}

main.js

import Vue from 'vue';
import App from './App';
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  ...App,
});
// 引入请求封装,将app参数传递到配置中
require('./config/request.js')(app)
app.$mount();

使用

    import {
        getcity
    } from '../../config/api.js'
    getlist() {
                var that = this;
                getcity().then(res => {
                        that.obtainCitys = res.data.groupList;
                        that.hotCity = res.data.hotGroup;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
喜欢 (2)