转载一个uni-app请求网络的文章.........

一、简单版
1.http.js 封装

// 定义api请求域名
const baseUrl = 'https://xxx.xxx.com'; //测试域名
// const baseUrl = '';//正式域名

const request = (options = {}) => {
    // 在这里可以对请求头进行一些设置
    options.header = {
        "token": uni.getStorageSync("token"),
        "Content-Type": "application/x-www-form-urlencoded",
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + options.url || '',
            method: options.type || 'GET',
            data: options.data || {},
            header: options.header || {}
        }).then(data => {
            let [err, res] = data;
            resolve(res);
        }).catch(error => {
            let [err, res] = error;
            reject(err)
        })
    });
}
//get请求
const get = (url, data, options = {}) => {
    options.type = 'GET';
    options.data = data;
    options.url = url;
    return request(options)
}
//post请求
const post = (url, data, options = {}) => {
    options.type = 'POST';
    options.data = data;
    options.url = url;
    return request(options)
}
//将变量和方法进行导出
export default {
    baseUrl,
    request,
    get,
    post,
}

2.main.js中全局引入

import Vue from 'vue'
import http from './common/http.js'
Vue.prototype.$http = http

3.在页面中使用index.vue

export default {
    methods:{
        login(){
            let data = {
                name:'zhangsan',
                password:'111'
            }
            this.$http.post('/api/login',data).then(res=>{
                console.log('登录返回信息',res)
            })
        }
    }
}

二、二次封装版
1.request.js

// 定义api请求域名
const baseUrl = 'https://xxx.xxx.com'; //测试域名
// const baseUrl = '';//正式域名

const request=(url,method,data,header)=>{
    return new Promise((resolve,reject)=>{
        uni.request({
            url:baseUrl+url,
            method:method || "GET",
            data:data,
            header:header || {
                "token": uni.getStorageSync("token"),
                "Content-Type": "application/x-www-form-urlencoded",
            }
        }).then(data=>{
            let [err,res] = data;
            resolve(res)
        }).catch(error=>{
            let [err,res] = error;
            reject(err)
        })
    })
}

export default {
    request,
    baseUrl,
}

2.api.js 全部api接口列表，引入request.js

import api from '@/common/request.js'
export default {
    login:(data,header)=>{
        return api.request('/api/login',"POST",data,header)
    }
}

3.在main.js中全局引入

import Vue from 'vue'
import api from './common/api.js';
Vue.prototype.$api = api;

4.在index.vue中使用

export default {
    methods:{
        login(){
            let data = {
                name:'zhangsan',
                password:'111'
            }
            that.$api.login(data).then(res=>{
                    console.log("登录信息",res);
                }).catch(err=>{
                    console.log("登记信息--失败",err);
                })
        }
    }
}