关于uni-app的request发起请求

uni.request发起网络请求相当于之前vue里面的axios用于获取服务器端接口数据。

uniapp发起请求的方法：
1、使用【uniapp.request({})】方法；
2、使用【this.$axios()】方法，代码为【this.$axios({method: ‘get’,url: this.$api+ '/Test】。

前言

一、uniapp发起请求的方法：

1.1使用uniapp.request({})方法

代码如下（示例）：

uni.request({
uni.request({
url: this.$api+'/Test/student/test',
header: {
'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
},
//请求成功后返回
success: (res) => {
// 请求成功之后将数据给Info
if(res.statusCode===200)
{
self.Info = res.data;
}
}
});

1.2使用this.$axios({})方法

代码如下（示例）：

this.$axios({
method: 'get',
url: this.$api + '/Test/student/test'
// data: {
// userName: 'Lan',
// password: '123'
// },
})
.then(function(res) {
if (res.data.code === 1234) {
self.Info = res.data
}
})
.catch(function(error) {
console.log(error.statusCode)
})

this.a p i ， t h i s . api，this.api，this.axios要在main.js当中注册为全局变量；

代码如下（示例）：

Vue.prototype.$api='http://192.168.2.114:8099'
Vue.prototype.$axios=axios

完整示例代码：

<template>
<view class="content">
<span>用户名:</span>
<input class="username" type="text" :value="username" placeholder="请输入用户名" />
<view class="">
<button type="default" @click="getInfo()">测试</button>
{{ Info }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
Info: '',
username: '工程师',
pwd: ''
}
},
methods: {
getInfo() {
// var self = this;
// uni.request({
// url: this.$api+'/Test/student/test',
// header: {
// 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
// },
// //请求成功后返回
// success: (res) => {
// // 请求成功之后将数据给Info
// if(res.statusCode===200)
// {
// self.Info = res.data;
// }
// }
// });
var self = this
this.$axios({
method: 'get',
url: this.$api + '/Test/student/test'
// data: {
// userName: 'Lan',
// password: '123'
// },
})
.then(function(res) {
if (res.data.code === 1234) {
self.Info = res.data
}
})
.catch(function(error) {
console.log(error.statusCode)
})
}
}
}
</script>
<style>
.span {
width: 30px;
}
.username {
border-radius: 10px;
border: 2rpx solid #007aff;
width: 80px;
padding: 10px;
}
</style>
<!-- <template>
<p>用户名：</p>
<input type="text" placeholder="请输入用户名" value=""/>
</template>
<script></script>
<style></style> -->

二、data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：
1.对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
2.对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化。
3.对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

三、使用步骤

代码如下（示例）：

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

四、返回值

代码如下（示例）：

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装

五、证书格式说明

1.文件路径形式：可将证书文件放到工程的 ‘static’ 目录中，然后填写文件路径，示例：‘/static/client.p12’。
2.Base64String：将证书文件的二进制转换为 Base64String 字符串，然后在字符串前面添加’data:cert/pem;base64,'前缀，示例：‘data:cert/pem;base64,xxx’ xxx 代表真实的证书 base64String
代码如下（示例）：

uni.configMTLS({
    certificates: [{
        'host': 'www.test.com',
        'client': '/static/client.p12',
        'clientPassword': '123456789',
        'server': ['/static/server.cer'],
    }],
    success ({code}) {}
});

## 总结

例如：以上就是今天要讲的内容，本文仅仅简单uni.request(OBJECT)
发起网络请求。