Uni-app---封装request.js

李曙君

最近在用Uni-app做混合APP开发，对于众多的接口请求，为了方便管理，采用封装request来方便管理。简单代码示例：

在utils目录新建config.js文件，用于做配置

let host = "";
if(process.env.NODE_ENV === 'development'){
    // 开发环境
    host = "http://www.dianphp.com/";
}else{
    // 生成环境
    host = "http://www.dianphp.com/";
}
export default host;

在utils目录新建request.js文件，用于分装请求

import host from './config.js'
const header = {}
const request = (url='',method='POST',data={}) => {
    header['content-type'] = "application/x-www-form-urlencoded";
    return new Promise((resolve,reject) => {
        uni.request({
            method:'post',
            url:host + url,
            data:data,
            header:header,
            dataType:'json'
        }).then((response) => {
            let [error,res] = response;
            // 登录过期
            if(res.code == 10086){
                uni.showToast({
                    title:'登录过期,请重新登录',
                    duration:2000
                });
            };            
            resolve(res.data);
        }).catch((error) => {
            let [err,res] = error;
            reject(err);
        });
    });
}
export default request

新建api目录，存放api.js

import request from '@/utils/request.js'
module.exports = {
    // 登录
    login(data){
        return request('api/user/login','post',data);
    }
}

在需要进行http请求的页面如何使用？

第一步：引入api.js

import api from '@/api/api.js'

第二步：使用api

api.login(this.accountPassword).then(res => {
    console.log(res);
});

其他方法示例：

utils目录新建request.js用于分装请求 

export default class Request {
    http (router,data={},method) {
        // 基础地址
        let path = 'http://tm.jiangzi.com/v1';
        // 返回promise
        return new Promise((resolve,reject) => {
            // 请求
            uni.request({
                url: `${path}${router}`,
                data: data,
                method:method,
                header: {
                    'content-type': 'application/json' ,
                    'X-Requested-With':'XMLHttpRequest'
                },
                success: (res) => {
                    // 将结果抛出
                    resolve(res.data)
                }
            })
        })    
    }
}

新建api.js

import Request from './request.js';
let request = new Request().http
//请求方法
export default {
    getPageData: function (data) {
        return request('/category',data,'POST')
    },
    getSearch: function (data) {
        return request('/search',data,'POST')
    },
    getrichtext: function (url) {
        return request(url,'','GET')
    }
}

组件里面调用：

import api from '../../static/js/api.js';
api.getPageData('').then(res => {
    console.log(res)
})

另外，还可以将api.js进行全局引入：

第一步：在main.js里面进行引入：

import api from './api/api.js'

第二步：放到全局

Vue.prototype.$api = api

接口调用：

this.$api.login({username:'张三',password:'123456'}).then((res) => {
    console.log(res);
});

 

来源：https://www.cnblogs.com/e0yu/p/13469653.html