api的封装

最新推荐文章于 2024-06-28 21:28:51 发布
最新推荐文章于 2024-06-28 21:28:51 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： # JS封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHXT__/article/details/103443922
版权

这是以 cnode中文社区的api 为例

值得一提的是有些请求可能要先进行url的编码

‘’
这是简易版的

'use strict'
// api 路径// get /topics 主题首页//get /topic/:id 主题详情
// post /accesstoken 验证 accessToken 的正确性// post /topic_collect/collect 收藏主题
// post /topic_collect/de_collect 取消主题// post /reply/:reply_id/ups 为评论点赞
const HOST = 'https://cnodejs.org/api/v1';

const topics = HOST + '/topics';

const topic = HOST + '/topic';

const accesstoken = HOST + '/accesstoken';

const collect = HOST + '/topic_collect/collect';

const de_collect = HOST + '/topic_collect/de_collect';

function reply (id) {
  return HOST + '/reply/'+ id +'/ups'
}

// get请求方法
function fetchGet(url, callback) {
  // return callback(null, top250)
  wx.request({
    url: url,
    header : { 'Content-Type': 'application/json' },
    success (res) {
      callback(null, res.data)
    },
    fail (e) {
      console.error(e)
      callback(e)
    }
  })
}

// post请求方法
function fetchPost(url, data, callback) {
  wx.request({
    method: 'POST',
    url: url,
    data: data,
    success (res) {
      callback(null, res.data)
    },
    fail (e) {
      console.error(e)
      callback(e)
    }
  })
}

module.exports = {
  // API
  topics,
  topic,
  accesstoken,
  collect,
  de_collect,
  reply,


  // METHOD
  fetchGet,
  fetchPost


}

高级详细版的(重要的还是学会如何去封装)

module.exports = class CNodeApi {
    constructor(){
        this.api = "https://cnodejs.org/api/v1";
    }
    /**
     * 获取主题列表
     * @param {Json} param
     * @param {Number } param.page 页数
     * @param {String } param.tab 主题分类。目前有 ask share job good
     * @param {Number } param.limit 每一页的主题数量
     * @param {boolean } param.mdrender  每一页的主题数量
     * @return {Promise[Array] } 承载主题列表 Promise
    */
    getTopicData(param){
        return new Promise((resolve, reject) => {
            wx.showLoading({
                title: '拼命加载中...',
            });
            wx.request({
                url: `${this.api}/topics`,
                data: param,
                method: 'GET',
                dataType: 'json',
                success: (res) => {
                    resolve(res);
                    wx.hideLoading();
                },
                fail(err){
                    reject(err);
                }
            });
        });
    }
    /**
     * 获取主题详情
     * @param {Number } id 
     * @param {String } mdrender 当为 false 时，不渲染。默认为 true，渲染出现的所有 markdown 格式文本。
     * @param {String } accesstoken String 当需要知道一个主题是否被特定用户收藏以及对应评论是否被特定用户点赞时，才需要带此参数。会影响返回值中的 is_collect 以及 replies 列表中的 is_uped 值。
     * @return {Promise[Json] } 承载主题内容 Promise
    */
    getTopicCon(id, ismdrender) {
        
        return new Promise((resolve, reject) => {
            wx.showLoading({
                title: '拼命加载中...',
            });

            wx.request({
                url: `${this.api}/topic/${id}`,
                data: {
                    mdrender: ismdrender||true,
                    accesstoken: this.checkLogin()||''
                },
                method: 'GET',
                dataType: "json",
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                    wx.hideLoading();
                }
            })
        });
    }
    /**
     * accesstoken 验证 accessToken 的正确性
     * @param {String} token 用户的 accessToken
     * @return {Promise[json]} 如果成功匹配上用户，返回成功信息。否则 403。
    */
    autoAccessToken(token){
        return new Promise((resolve, reject) => {
            wx.request({
                url: `${this.api}/accesstoken`,
                data: {
                    accesstoken: token
                },
                method: 'POST',
                dataType: 'json',
                success(res){
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                }
            });
        });
    }
    /**
     * 收藏主题
     * @param {String} id 主题 id
     * @return {Promise[json]} 返回值示例 {"success": true}
    */
    collectTopic(id){
        return new Promise((resolve, reject) => {
            const token = this.checkLogin();
            if (!token) return reject('No login!');
            
            wx.request({
                url: `${this.api}/topic_collect/collect `,
                data: {
                    accesstoken: token,
                    topic_id: id
                },
                method: 'POST',
                dataType: 'json',
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                }
            });
        });
    }
    /**
   * 取消收藏主题
   * @param {String} id 主题 id
   * @return {Promise[json]} 返回值示例 {"success": true}
  */
    deCollectTopic(id) {
        return new Promise((resolve, reject) => {
            const token = this.checkLogin();
            if (!token) return reject('No login!');

            wx.request({
                url: `${this.api}/topic_collect/de_collect  `,
                data: {
                    accesstoken: token,
                    topic_id: id
                },
                method: 'POST',
                dataType: 'json',
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                }
            });
        });
    }
    /**
     * 为评论点赞
     *  说明：接口会自动判断用户是否已点赞，如果否，则点赞；如果是，则取消点赞。点赞的动作反应在返回数据的 action 字段中，up or down。
     * 返回值示例： {"success": true, "action": "down"}
     * @param {String} id 评论id
    */
    replyUps(id){
        return new Promise((resolve, reject) => {
            const token = this.checkLogin();
            if (!token) return reject('No login!');

            wx.request({
                url: `${this.api}/reply/${id}/ups `,
                data: {
                    accesstoken: token
                },
                method: 'POST',
                dataType: 'json',
                success(res) {
                    resolve(res);
                },
                fail(err) {
                    reject(err);
                }
            });
        });
    }
    /**
     * 获取用户详情
     * @param {String} loginname 用户名称
    */
    getUserInfo(loginname){
        return new Promise((resolve, reject) => {
            wx.request({
                url: `${this.api}/user/${loginname} `,
                method: 'GET',
                dataType: 'json',
                success(res) {
                    resolve(res.data);
                },
                fail(err) {
                    reject(err);
                }
            });
        });
    }
    /**
     * 获取用户收藏主题
     * @param {String} loginname 用户名称
    */
    getUserCollectTopic(loginname){
        return new Promise((resolve, reject) => {
            wx.request({
                url: `${this.api}/topic_collect/${loginname} `,
                method: 'GET',
                dataType: 'json',
                success(res) {
                    resolve(res.data);
                },
                fail(err) {
                    reject(err);
                }
            });

        });
    }
    /**
     * 新建评论
     * @param {String} id 主题 id
     * @param {String} content 评论主体内容 
     * @param {String} replyId 如果这个评论是对另一个评论的回复，请务必带上此字段。这样前端就可以构建出评论线索图。
     * @return {Promise[json]} 示例：{success: true, reply_id: '5433d5e4e737cbe96dcef312'}
     */
    buildReplies(id, content, replyId ){
        return new Promise((resolve, reject) => {
            const token = this.checkLogin();
            if (!token) return reject('No login!');

            wx.request({
                url: `${this.api}/topic/${id}/replies`,
                data: {
                    content: content,
                    reply_id: replyId||'',
                    accesstoken: token
                },
                method: 'POST',
                dataType: 'json',
                success(res) {
                    resolve(res.data);
                },
                fail(err) {
                    reject(err);
                }
            });

        });
    }
    /**
     * 检查是否登录
     * @param {boolean} isShowModal 如果没登录是否打开弹窗，需要挂载在 Page 上，示例：Page({checkLogin: cnodeApi.checkLogin});
     * @param {Function} callback 确定回调
     * @return {String} token
    */
    checkLogin(isShowModal, callback){
        const token = wx.getStorageSync('token');
        
        if (token === '' ){
            if (isShowModal){
                wx.showModal({
                    title: '还没登录，是否登录？',
                    success: res => callback && callback(res)
                });
            }
            return false;
        }
        return token;
    }
    /**
     * 验证登录
     * @return {Promise[Json]} 承载用户信息 Promise
    */
    autoLogin(){
        return new Promise((resole,reject) => {
            const token = this.checkLogin();
            if (!token) return reject('No login!');

            this.autoAccessToken(token).then(res => {
                if (res.data.success) {
                    return resole(res.data);
                }
                return resole(false);
            }).catch(err => reject(err));
        });
    }
}
  • 另一个列出所有参数的版本
module.exports={
	// get /topics 主题首页
  getTopics(options, callback){
    let apiUrl="https://cnodejs.org/api/v1/topics?";

    if (typeof options==='function'){
		callback=options;
     	options={};
    };

// 设置文档参数；默认为后面的一个值;
    let params={
      page: options.page || 1,
      limit: options.limit || 10,
	  tab: options.tab || 'all',
	  mdrender: true  // true, 默认值渲染Markdown的格式；
	}
	apiUrl += set(params);
	// console.log(apiUrl);
	request(apiUrl, callback);
  },

	
	// get /topic/:id 主题详情
  getTopic(topicId, callback){
    let apiUrl='https://cnodejs.org/api/v1/topic/' + topicId + '?';	 
		// 参数
    let params={
		accesstoken: '',
		mdrender: false,
	}
	apiUrl += set(params);
    request(apiUrl, callback);
  }
  
};



// 获取数据， 将数据数据整合（有些复杂）
function request(url, callback){
	wx.request({
		url: url,
		date:{},
		header:{
			"Content-Type":"application/json"
		},
	// 获取数据；
	success(res){
		// console.log(res);
		callback(res.data);
	}

	})

}

// 进行url编码， 遍历拿到值（这里使用的函数有难度，想不到）

function set(object) {
    return Object.keys(object).map( (k) => {
			// console.log((k +'='+object[k]).join('&'));
		// return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);	
			// console.log(object[k]);
			
        return k + '=' + object[k];
    }).join('&');
}
ZH_TX
关注
专栏目录
封装API接口
gsy13140081的博客
10-07 1302
第一步： 首先引入axios 然后创建两个文件夹api和http http.js 里面的 复制代码 1 import axios from ‘axios’;//引入axios 2 3 //环境的切换 开发环境(development)使用的是测试接口 和 生产环境(production)使用的是上线接口 4 if(process.env.NODE_ENV==‘development’){ 5 //设置默认路径 6 axios.defaults.baseURL=‘http://120.5
FastAPI封装YOLO目标检测模型
11-26
综上所述，"FastAPI封装YOLO目标检测模型"项目将YOLO的高效目标检测能力与FastAPI的易用性结合，创建了一个可部署的服务，使得远程调用目标检测成为可能。这个项目的实现涉及深度学习模型的整合、API设计和部署策略...
api封装
weixin_30360497的博客
08-23 189
const sql={ insert: function(collection,insertData){ return new Promise(function(resolve,reject){ collection.insertMany(insertData,(err,data)=>{ if(err) throw e...
Vue.js 中的API接口封装实战与详解
最新发布
Play_Sai的博客
06-28 856
在开发Web应用的过程中，我们常常需要和服务器进行数据交互，这就涉及到了API接口的调用。在Vue.js项目中，为了提高代码复用性、可维护性和降低错误率，我们将API接口进行合理的封装显得尤为重要。本文将详细介绍如何在Vue.js项目中实现API接口的封装。
API的封装
m0_60782710的博客
04-12 3249
在组件中难免会出现多个API的调用，但是每个组件很难复用，因此我们就可以对API进行封装。 首先，我们可以在src同级下创建一个工具文件夹utils，而后在里面创建一个js文件名字可以自定义例如我这里为request.js。 1.导入axios，定义并创建域名接口，然后共享全局变量 import axios from 'axios' const request = axios.create({ baseURL: '域名' // 请求接口的域名 }) export default request
微信小程序vant引用 及api封装
08-13
5. **api 封装**: 微信小程序的 API 通常可以直接在 JavaScript 文件中调用，但为了提高代码的可复用性和可维护性，你可以将常用或复杂的 API 进行封装。例如，创建一个 `api.js` 文件，封装网络请求： ```...
c#winform 进程之间进行通讯 API封装包含示例代码进程通讯.rar
05-23
本资源提供了一个API封装，专门用于实现WinForm窗口之间的进程通信，并且包含了示例代码，支持消息队列的方式进行通信。 首先，我们来理解一下C#中的进程通讯基础。进程通讯主要有以下几种方式： 1. **管道(Pipes)...
node.js实现微信JS-API封装接口的示例代码
10-19
主要介绍了node.js实现微信JS-API封装接口的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
easy_qiniu:基于七牛官方API封装成的 Client
05-12
基于七牛官方API封装成 SevenCow 类，便于日常调用。 ##Requirements Python 3 qiniu pip install qiniu requests pip install requests ##Usage ###1. upload_all_files_to_qiniu.py 在文件中修改 access_key、...
C语言常用数据结构、算法API（深度封装）
01-11
C语言常用数据结构、算法API（深度封装）
.NET 的 Windows API的封装
03-12
Windows Api 的 .NET 封装，从微软的 .NET 基础类库中提取出来的，方便大家在 C# .NET 中调用 Windows API.
API常用函数封装
Meith的专栏
10-12 1372
using System.Text; using System; using System.Runtime.InteropServices; using System.Collections; using System.Collections.Generic; namespace Win32API { public class WinAPI { #region "API函数定义 " [DllImport("user32.dll ", C
api常用封装
healer12306的博客
01-10 516
api封装请求的过程
Heartnottowake的博客
04-29 1958
1，api封装是为了简便的请求数据 首先一般项目会有一个request文件，一个api文件和一个manager文件 request这个文件主要设置响应头，请求拦截和请求响应的一些处理 api文件是为了将所有的请求封装成一个方法，并暴露出来，让你的组件去调用 manager是为了定义不同的请求方式 出现了3个文件，如果组件调用，不可能调用3个文件，然后去一个一个处理，肯定是最后只调用api文件，依赖关系就是api文件调用manager(里面有请求方式），然后manager调用request（里面有请求拦截和
API就是用来封装的
GetData's mode
07-23 1037
厌倦网络是正确的.今天偶然开了一次QQ,看到群里很多人在争.我不敢说我有多么的厉害,但是最近的一个机会让我可以同很多老练的程序员一起做项目,他们眼中,API就是用来封装的,C/C++就是用来做封装的.那些总吵着什么语言牛B的人,真是可悲.诱惑和误导还真多,一不小心就会踩进去.
api封装，封装api 这么多年都不和别人说的秘技，超好用，简单只需2步
可乐伢
04-20 3259
第一步：在src下面新建utils文件夹，新建个request.js **封装api，能有啥秘技，就皮一下，吼，很开心** import axios from 'axios' import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改 import store from '../store' **封装api，能有啥秘技，就皮一下，吼，很开心** // 创建axios实例 const service = axios.create({
API接口封装：实践、优化与注意事项
An4480的博客
03-14 1091
通过合理的实践、优化和注意事项的考虑，可以提高API的使用效率、安全性和可维护性，为应用程序的开发和运维带来便利。：对于封装后的API接口，应提供详细的文档说明，包括接口的功能、参数、返回值、异常处理等。：封装后的API接口应提供简洁、易用的接口，方便其他开发人员调用。：封装类中的方法应负责构建API请求，包括设置请求头、请求体等，并处理API的响应，包括解析响应数据、处理异常等。：在进行API接口封装之前，首先要明确需求，包括需要调用的API接口、接口的参数、返回值以及可能出现的异常等。
axios api封装
09-09
这里是一个简单的axios API封装示例： ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置基础URL timeout: 5000, /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值