Sending network request in wechat applet

Applet project

The main files involved in the code are ：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#1c424d",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.html

<view class="box">
  <image src="/static/images/aito.jpg"></image>
  <text class="title">AITO  Ask boundary M5</text>
  <text>{
   {desc}}</text>
</view>

pages/index/index.wxss

.box{
    
  margin: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
image{
    
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.title{
    
  padding: 20rpx;
  font-size: 28rpx;
  color: rgba(0,0,0,0.7);
}

pages/index/index.js

Page({
    
  data:{
    
    desc:""
  }
})

Send network request

Network request function

Wechat applet provides wx.request(Object object) This API, Used to send network requests , The API Take an object as an argument , The object contains multiple attributes , The common ones are ：

• url, Requested address ,string type , Required .
• data, Requested parameters , It can be a string or an object , Not required .
• method, Requested method ,string type , The default value is "GET".
• success, Request successful callback function , Not required .
• fail, Callback function for request failure , Not required .

The documents involved in the code change are ：pages/index/index.js.

If you want the test that sends the request to run , You need to make simple settings in the wechat developer tool ：
details > Local settings , Check Do not check the legal domain name 、web-view（ Business domain name ）、TLS Version, and HTTPS certificate .

pages/index/index.js

Page({
    
  data:{
    
    desc:""
  },
  onLoad(){
    
    wx.request({
    
      url:"https://api.uixsj.cn/hitokoto/get",
      method:"GET",
      success: res => {
    
        console.log(" The request is successful ",res);
        this.setData({
    desc:res.data})
      },
      fail: err => {
    
        console.log(" request was aborted ",err);
      }
    })
  }
})

Encapsulate network request function

The documents involved in the code change are ：

1. pages/index/index.js.
2. utils/request.js. Create a new directory under the project root directory ：utils,utils Next new file ：request.js.

pages/index/index.js

import request from "../../utils/request";
Page({
    
  data:{
    
    desc:""
  },
  onLoad(){
    
    this.getDataFromServer();
  },
  async getDataFromServer(){
    
    let result = await request("https://api.uixsj.cn/hitokoto/get");
    console.log(result);
    this.setData({
    desc:result})
  }
})

utils/request.js

export default (url,data={
    },method="GET") => {
    
  return new Promise((resolve,reject) => {
    
    wx.request({
    
      url,
      data,
      method,
      success: res => {
    
        console.log(" The request is successful ");
        resolve(res.data);
      },
      fail: err => {
    
        console.log(" request was aborted ");
        reject(err);
      }
    })
  })
}

Related links

【 Wechat applet 】 Applet and server http signal communication