百变鹏仔-专注前端行业精选
微信小程序 接口请求封裝
作者:鹏仔先生日期:2020-11-19 14:51:54浏览:2885分类:JavaScript
话不多说,先上完整代码
在utils文件下新建文件“http.js”,放入下方代码
const host = 'http://www.iqzhan.com'; // 接口網址 const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域 // 接口地址拼接 const urls = { home: host + domain + 'home', // 获取首頁接口 article: host + domain + 'article', // 获取文章詳情接口 } export default urls;
继续在utils文件下新建文件“request.js”,放下放代码
// 引入接口 import urls from './http'; // 默認请求头(可自行添加token等) var header = { 'content-type': 'application/x-www-form-urlencoded', } /** * function: 封装网络请求 * @url URL地址 * @params 请求参数 * @method GET/POST(请求方式) * @resolve 成功回调 * @reject 失败回调 */ function request(url, params, method, resolve, reject) { wx.showLoading({ title: "加载中...", }) wx.request({ url: url, // 接口地址 data: dealParams(params), // 請求參數 method: method, // 請求方式 header: header, // 請求頭 success: (res) =>{ wx.hideLoading(); // 關閉加載提示 if (res.data) { // 判斷請求成功的狀態碼 if (res.data.code == 100000) { resolve(res.data); } else { reject(res.data); } } }, fail: function(error) { reject(""); } }) } /** * function: 請求時添加必帶的固定參數,沒有需求無需添加 * @params 请求参数 */ function dealParams(params) { return params = Object.assign({}, params, { // id: '666', }) } const apiService = { // POST請求 REQUESTPOST(url, params) { return new Promise((resolve,reject) => { request(url, params, "POST", resolve, reject); }) }, // GET請求 REQUESTGET(url, params) { return new Promise((resolve,reject) => { request(url, params, "GET", resolve, reject); }) } } // 外部調用接口 module.exports = { getHome: (params) => { // 获取首頁接口 return new Promise((resolve,reject)=> { resolve(apiService.REQUESTGET(urls.home,params)) }) }, getArticle: (params) => { // 获取文章詳情接口 return new Promise((resolve,reject)=> { resolve(apiService.REQUESTGET(urls.article,params)) }) }, }
使用,在需要调用的页面js中,如下代码
// 引入需要使用的接口 import { getHome,getArticle } from '../../utils/request.js' Page({ getData: function (e) { // 获取首頁接口 getHome({ page: '1' }).then(res => { console.log(res) }) // 获取文章詳情接口 getArticle({ id: '1527' }).then(res => { console.log(res) }) }, onLoad: function () { this.getData(); }, })
接下来,讲解
http.js中
const host = 'http://www.iqzhan.com'; // 接口網址 const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域
定义接口地址,定义接口相同路径(http://www.iqzhan.com/os_wxapi/v1/home),为什么要分开定义,因为说不准页面里面只获取host的网址需求,当然你也可以两个直接拼接一起。
// 接口地址拼接 const urls = { home: host + domain + 'home', // 获取首頁接口 article: host + domain + 'article', // 获取文章詳情接口 }
定义接口的路径与地址拼接。
request.js中
/** * function: 封装网络请求 * @url URL地址 * @params 请求参数 * @method GET/POST(请求方式) * @resolve 成功回调 * @reject 失败回调 */ function request(url, params, method, resolve, reject) { wx.showLoading({ title: "加载中...", }) wx.request({ url: url, // 接口地址 data: dealParams(params), // 請求參數 method: method, // 請求方式 header: header, // 請求頭 success: (res) =>{ wx.hideLoading(); // 關閉加載提示 if (res.data) { // 判斷請求成功的狀態碼 if (res.data.code == 100000) { resolve(res.data); } else { reject(res.data); } } }, fail: function(error) { reject(""); } }) }
封装的请求,请求拦截
/** * function: 請求時添加必帶的固定參數,沒有需求無需添加 * @params 请求参数 */ function dealParams(params) { return params = Object.assign({}, params, { // id: '666', }) }
请求固定的参数,有些项目需求,每个接口都必须传递某个参数,即可使用上方代码实现。
const apiService = { // POST請求 REQUESTPOST(url, params) { return new Promise((resolve,reject) => { request(url, params, "POST", resolve, reject); }) }, // GET請求 REQUESTGET(url, params) { return new Promise((resolve,reject) => { request(url, params, "GET", resolve, reject); }) } }
对应的post和get请求
// 外部調用接口 module.exports = { getHome: (params) => { // 获取首頁接口 return new Promise((resolve,reject)=> { resolve(apiService.REQUESTGET(urls.home,params)) }) }, getArticle: (params) => { // 获取文章詳情接口 return new Promise((resolve,reject)=> { resolve(apiService.REQUESTGET(urls.article,params)) }) }, }
外部调用接口
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
暂无评论,来添加一个吧。