Request网络请求如何封装

本文小编为大家详细介绍“Request网络请求如何封装”，内容详细，步骤清晰，细节处理妥当，希望这篇“Request网络请求如何封装”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

新城网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联公司从2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

一、微信小程序

首先我们来看一下官方文档中介绍的wx.request()

默认使用方式

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {},
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

二、Request.js封装

Request.js是基于WX API的封装只有一个文件

const URL = 'http://love520.com'
 
module.exports = {
   //封装request方法，第一个参数请求地址，第二个参数传递参数，第三个参数请求方式
    request:function(url,data={},method){
       //返回promise对象  resolve 成功的回调方法 reject失败的回调方法 一旦发生就不会改变
        return new Promise((resolve, reject)=>{
            wx.request({
                url: URL + url,
                data,
                method,
                header:{
                    'token':wx.getStorageSync('token')
                },
                success:(res)=>{
                    if(res.statusCode === 200 && res.data.code === 200){
                        resolve(res.data)
                        wx.hideLoading()
                    } else {
                        wx.showToast({
                            icon:'error',
                            title: res.Msg,
                        })
                        reject(res.Msg)
                    }
                },
                fail:(err)=>{
                    wx.showToast({
                        icon:'error',
                        title: '接口无响应',
                    })
                    reject('接口无响应')
                }
            })
        })
    }
}

三、Route.js封装

Route.js主要是区分业务的怎删改查根据领域模型划分多个业务体系

const { request } = require('./request.js')
//restful类型接口
module.exports = {
  GetUsers:(data) => request('/api/identity/users/{id}',{},'GET'),
  PostUsers:(data) => request('/api/identity/users/{id}',data,'POST'),
  PutUsers:(data) => request('/api/identity/users/{id}',data,'PUT'),
  DeleteUsers:(data) => request('/api/identity/users/{id}',{},'DELETE'),
}

四、使用

import { GetUsers,PostUsers,PutUsers,DeleteUsers} from "../../utils/route"
GetUsers(id,{}).then((res)=>{
    this.setData({
        list: res.data
    })
})
PostUsers(id,data).then((res)=>{
    wx.showToast({
        icon:'none',
        title: res.Msg,
    })
})
PutUsers(id,data).then((res)=>{
    wx.showToast({
        icon:'none',
        title: res.Msg,
    })
})
DeleteUsers(id,{}).then((res)=>{
    wx.showToast({
        icon:'none',
        title: res.Msg,
    })
})

读到这里，这篇“Request网络请求如何封装”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。