使用uni-app封装request

使用uni-app封装ajax请求

export default {
    // 全局配置
    common: {
        baseUrl: "",
        header: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
        data: {},
        method: 'GET',
        dataType: 'json',
        token: false
    },

    // 请求 返回promise
    request(options = {}) {
        // 组织参数
        options.url = this.common.baseUrl + options.url
        options.header = options.header || this.common.header
        options.data = options.data || this.common.data
        options.method = options.method || this.common.method
        options.dataType = options.dataType || this.common.dataType
        options.token = options.token === true ? true : this.common.token
        // 请求
        return new Promise((res, rej) => {
            // token验证
            if (options.token) {
                let token = uni.getStorageSync('dxToken')
                // 二次验证
                if (!token) {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    // token不存在时跳转
                                      uni.navigateTo({
                        url:"/pages/login/login"
                      })
                    return rej("请先登录")
                }
                // 往header头中添加token
                options.header.Authorization = token
            }
            // 请求中...
            uni.request({
                ...options,
                success: (result) => {
                    // 服务端失败
                    let data = result.data;
                    if (!data) {
                        uni.showToast({
                            title: data.msg || '服务端失败',
                            icon: 'none'
                        });
                        return rej(data)
                    } else {
                        res(data)
                    }
                },
                fail: (error) => {
                    uni.showToast({
                        title: error.errMsg || '请求失败',
                        icon: 'none'
                    });
                    return rej(error)
                }
            });
        })
    },
    // get请求
    get(url, options = {}) {
        options.url = url
        options.data = {}
        options.method = 'GET'
        return this.request(options)
    },
    // post请求
    post(url, data = {}, options = {}) {
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    },
    // delete请求
    del(url, data = {}, options = {}) {
        options.url = url
        options.data = data
        options.method = 'DELETE'
        return this.request(options)
    },
}

1. 在main.js引入使用，这样就挂载全局使用

import http from './utils/request.js'
Vue.prototype.$http = http

2.在组件中使用

this.$http
        .post(`${baseUrl}/api`, {
          esWordSearch: this.search,
          pageNo: 1,
          pageSize: this.pageSize,
        })

这样就完成接口封装了。方便了很多