话不多说,先上完整代码
在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(); }, })
接下来,讲解
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', // 获取文章詳情接口 }
定义接口的路径与地址拼接。
/** * 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)) }) }, }
外部调用接口
本文链接:http://so.lmcjl.com/news/701/