小程序wx.request()方法
发起 HTTPS 网络请求。
参数
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | ||
data | string/object/ArrayBuffer | 否 | 请求的参数 | ||
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json | ||
method | string | GET | 否 | HTTP 请求方法 | |
dataType | string | json | 否 | 返回的数据格式 | |
responseType | string | text | 否 | 响应的数据类型 | 1.7.0 |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success回调函数返回的数据 data、statusCode、header
文件目录
一个项目请求接口特别多 我们不能每个文件请求接口都去写url这个修改会有问题的所以我们要建一个文件写请求的接口路径 如图所示
使用方法
1、api入口文件
在api入口文件先定义
let url = "https://baidu.com";
export default url;
复制代码
2、config.js配置请求的url
config.js
配置请求的url
var api_url = require('../apientry/index.js');
var config = {
api: api_url.default
}
module.exports = {
ROOT_API: config.api,
}
复制代码
这里用专门文件去记录域名为了方便切换正式、测试、本地的环境。
3、引入url并拼接后台给的接口
resource.js
// 引入url并拼接后台给的接口
import {ROOT_API} from './config';
const hApi = {
homeInfo: ROOT_API.concat('/homeInfo'), // 首页信息
}
module.exports = hApi;
复制代码
用一个专门的文件记录后台的接口这样可以方便更改接口,统一对该文件修改就可以了
4、封装wx.request()方法
import {homeInfo} './resource.js';
index.js
封装wx.request()方法
var wxRequest = (url, data = {}, method = 'POST') => {
return new Promise(function (resolve, reject) {
wx.request({
url,
method,
data: data,//getObj(data),
header: {},
success: (res) => {
console.log(res)
resolve(res.data)
},
fail: (data) => {
reject(data)
},
complete: (data) => {
}
})
})
};
将后台接口封装成一个方法,每次只调用该方法就OK
module.exports = {
homeInfo (data){
return wxRequest(homeInfo, data);
},
}
简单介绍一下隐士返回值
var wxRequest = () => {return } 相当于 var wxRequest = function wxRequest(){return }
也可以写成 var wxRequest = () => ()
复制代码
5、页面中使用方法
import {homeInfo} from '@/api/index.js';
async getHomeInfo () {
let params = {}
let res = awiat homeInfo (params)
...
}
复制代码
结尾
以上就是整个流程啦 欢迎大家提议,相互学习 嘿嘿