原生小程序的axios封装

1.与pages同级创建一个request文件夹
2.里边建request.js

const apiBase = "https://api.it120.cc/xiaowen"

export const Request = (params) => {
    wx.showLoading({
        title: '加载中...',
    })
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: apiBase + params.url,
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: res => {
                resolve(res.data)
            },
            fail: err => {
                reject(err)
            },
            complete: wx.hideLoading
        })
    })
}

3.与request.js同级创建一级页面文件夹
4.在一级页面文件夹里创建 ‘一级页面.js’

//进行二次封装
import { Request } from './request'

// 启动页的轮播图
module.exports.appBanner = () => Request({
    url: "/banner/list?type=app",
    method: 'get'
})
// 商品列表
module.exports.goodslist = (data) => Request({
    url: "/shop/goods/list",
    method: 'post',
    data
})
// 商品详情
module.exports.shopinfo = (data) => Request({
    url: "/shop/goods/detail",
    method: 'get',
    data,
})

5.在需要使用的页面里引用

//引用方法
import {appBanner} from "../../utils/http"
在page中的onLoad
onLoad(options) {
        appBanner().then(res=>{
            console.log(res);
            this.setData({
                Banner:res.data
            })
        })
    },
 shopinfo({
            id: this.data.id
        }).then(res => {
            console.log(res);
            this.setData({
                shopinfo: res.data
            })
       })

你可能感兴趣的:(小程序,小程序,javascript,前端)