黑马程序员技术交流社区

标题: 【上海校区】封装uni-app的request请求 [打印本页]

作者: 梦缠绕的时候    时间: 2019-7-3 14:35
标题: 【上海校区】封装uni-app的request请求
http.js
//封装requset,uploadFile和downloadFile请求,新增get和post请求方法
let http = {
    'setBaseUrl': (url) => {
        if (url.charAt(url.length - 1) === "/") {
            url = url.substr(0, url.length - 1)
        }
        http.baseUrl = url;
    },
    'header': {},
    'beforeRequestFilter': (config) => { return config },
    'beforeResponseFilter': (res) => { return res },
    'afterResponseFilter': (successResult) => { },
    'get': get,
    'post': post,
    'request': request,
    'uploadFile': uploadFile,
    'downloadFile': downloadFile
}


function init(con) {
    //url
    let url = http.baseUrl;
    if (url && con.url && !con.url.match(/^(http|https):\/\/([\w.]+\/?)\S*$/)) {
        if (con.url.charAt(0) !== "/") {
            con.url = "/" + con.url;
        }
        con.url = url.concat(con.url);
    }
    //header
    if (http.header != undefined && http.header != null) {
        if (!con.header) {
            con.header = http.header;
        } else {
            Object.keys(http.header).forEach(function (key) {
                con.header[key] = http.header[key]
            });
        }
    }
}

function request(con) {
    init(con);
    let config = {
        url: con.url ? con.url : http.baseUrl,
        data: con.data,
        header: con.header,
        method: con.method ? con.method : 'GET',
        dataType: con.dataType ? con.dataType : 'json',
        responseType: con.responseType ? con.responseType : 'text',
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.request(http.beforeRequestFilter(config));
}

function get(url, con, success) {
    let conf = {};
    if (con && typeof con == 'function') {
        if (success && typeof success == 'object') {
            conf = success;
        }
        conf.success = con
    }else{
        if (con && typeof con == 'object') {
            conf = con;
        }
        conf.success = success;
    }

    if (url) {
        conf.url = url
    }
    conf.method = "GET";
    return request(conf);
}

function post(url, data, con, success) {
    let conf = {};
    if (con && typeof con == 'function') {
        if (success && typeof success == 'object') {
            conf = success
        }
        conf.success = con;
    } else {
        if (con && typeof con == 'object') {
            conf = con;
        }
        conf.success = success;
    }
    if (url) {
        conf.url = url
    }
    if (data) {
        conf.data = data
    }
    conf.method = "POST";
    return request(conf);
}

function uploadFile(con) {
    init(con);

    let config = {
        url: con.url ? con.url : http.baseUrl,
        files: con.files,
        filesType: con.filesType,
        filePath: con.filePath,
        name: con.name,
        header: con.header,
        formData: con.formData,
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.uploadFile(http.beforeRequestFilter(config));
}

function downloadFile(con) {
    init(con);

    let config = {
        url: con.url ? con.url : http.baseUrl,
        header: con.header,
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.downloadFile(http.beforeRequestFilter(config));
}


export default http
可以设置全局的url访问地址(会拼接请求的url成完整的url,所以在写url时只需要"/xxx"),也可以在请求时设置具体url(以http或https开头)

可以设置全局的header,如果请求时有header参数,会加上全局的header

可以设置拦截器,有发送请求前的拦截器beforeRequestFilter,参数是包含已经拼接完的url和header的请求参数,注意要返回;执行成功回调函数前的拦截器beforeResponseFilter,参数是回调成功函数的参数,注意要返回;执行成功回调函数后的拦截器afterResponseFilter,参数为成功回调函数的返回值。

具体例子

my.js

import http from './http'

const AUTH_TOKEN = "X-Auth-Token";

http.setBaseUrl("http://localhost:8081");
http.header['comp'] = "cjx913"
if (uni.getStorageSync(AUTH_TOKEN)) {
    http.header[AUTH_TOKEN] = uni.getStorageSync(AUTH_TOKEN);
}

http.beforeResponseFilter = function (res) {
    //X-Auth-Token
    if (res.header) {
        var respXAuthToken = res.header[AUTH_TOKEN.toLocaleLowerCase()];
        if (respXAuthToken) {
            uni.setStorageSync(AUTH_TOKEN, respXAuthToken);
            http.header[AUTH_TOKEN] = respXAuthToken;
        }
    }
    return res;
}

let my = {
    'http': http
}
export default my
main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = true

App.mpType = 'app'

import fly from './fly/fly'
Vue.prototype.$fly = fly

import my from './my/my'
var http = my.http;

Vue.prototype.$http = http

import store from './store'
Vue.prototype.$store = store



const app = new Vue({
  ...App
})
app.$mount()
index.js

<script>
        export default {
                data() {
                        return {
                                title: 'Hello',
                                name:'cjx913'
                        }
                },
                onLoad() {
                       
                },
                methods: {
                        session:function(){
                                // this.$fly.get('/session')
                                // .then(function (response) {
                                //         console.log("hello");
                                //         console.log(response.data);
                                //                 console.log(response);
                                // })
                                // .catch(function (error) {
                                //         console.log(error);
                                // });

                                // this.$http.request({
                                //         url:"session",
                                //         success:(res)=>{
                                //                 console.log(res);
                                //         }
                                // })
                                // this.$http.get("/session",function(res){
                                //                 console.log(res);
                                //         }
                                // )
                                this.$http.get("/session",{
                                success:function(res){
                                        console.log(res);
                                        }
                                        }
                                )
                        }
                }
        }
</script>

上述是简单设置baseUrl,header和通过拦截器拦截response的X-Auth-Token,并让请求带上X-Auth-Token
---------------------




作者: 梦缠绕的时候    时间: 2019-7-3 14:35
任何问题欢迎在品论去留言或者联系学姐哟
作者: 梦缠绕的时候    时间: 2019-7-3 14:35
DKA-2018
作者: 晨大喵    时间: 2019-7-17 11:48
感谢分享~~




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2