小程序：封装ajax

最新推荐文章于 2021-10-31 15:46:09 发布

原创最新推荐文章于 2021-10-31 15:46:09 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了一个小程序中Ajax请求的封装方法，包括GET和POST请求，并实现了一个验证用户是否登录的功能。通过在请求头中携带token进行身份验证，若未登录则自动跳转至登录页面，确保了API的安全调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

├── pages
├── images
├── utils
│ ├── ajax.js
├── app.js

代码

// utils/ajax.js
// 基准路径
const baseUrl = 'http://localhost:8090'
// 1.0 返回一个 promise 对象
function ajax(url, method = 'GET', data = {}, header = {}) {
  return new Promise((resolve, reject) => {
    wx.showLoading({
      title: '加载中'
    })
    // 2.0 完成逻辑处理
    wx.request({
      url: baseUrl + url,
      method: method,
      data: data,
      header,
      success: res => {
        resolve(res)
        wx.hideLoading()
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 封装一个单独的 get 方法
ajax.get = function (url, data = {}) {
  return ajax(url, 'GET', data)
}

// 封装一个单独的 post 方法
ajax.post = function (url, data = {}) {
  return ajax(url, 'POST', data)
}

// 封闭一个验证是否登录的方法
ajax.auth = function (url, method, data = {}) {
  // 得到 token
  var token = wx.getStorageSync('token')
  if (!token) {
    // 如果不存在，跳转到登录页面
    wx.navigateTo({
      url: '/pages/index/index'
    })
    return new Promise(() => { })
  }
  // 如果存在，就直接发送请求（在请求头中带上 token）
  return ajax(url, method, data, { "Authorization": token })
}

// 3.0 暴露给外界
export default ajax

//app.js
const ajax = require('./utils/ajax.js');
// 第一种
global.ajax = ajax;

// 某个页面调ajax
global.ajax.default.post('/add-address/submit', data).then(res => {
  if (res.data.code === 200) {

  }
})