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