小程序：网络请求

问题导向

微信小程序的网络请求如何处理？

如果你都有了答案，可以忽略本文章，或去小程序学习地图寻找更多答案

---

网络请求

API:
wx.request({})         发送请求
wx.uploadFile({})      上传文件
wx.downloadFile({})    下载文件
wx.connectSocket({})   socket通信

---

wx.request

wx.request({
  url: 'url',
  data: {},
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: (res) => {
    console.log(res.data)
  },
  fail: (reson) => {
    console.log(reson)
 }
})

一般不会直接使用，而是需要封装一下

---

简单封装

import {config} from '../config'

const error_message = {
    404:'请求地址错误',
    500:'服务端繁忙，请稍后重试'
}

class Http {
	request(url, data={}, method='GET'){
		return new Promise((resolve,reject) => {
			wx.request({
				url:config.api_base_url + url,
				method:method,
				data:data,
				header:{
					'content-type':'application/json'
                    'token':wx.getStorageSync('token')
				},
				success:res => {
                    const code = res.statusCode.toString()
                    if(code.startsWith('2')){
                        resolve(res.data)
                    }else if(code == '404')){
                        this._showError(error_message[404])
                    }else if(code == '401'){
                        this._refetch()
                    }
            		else if(code.startsWith('5')){
                        this._showError(error_message[500])
                    }
				},
				fail:err => {
                    this._showError(error_message[500])
					reject(err)
				}
			})
		})
	}
    
    _refetch(){
        let token = new Token()
        token.getTokenFromServer(token => {
            this.request()
        })
    }
    
    _showError(info){
        wx.showToast({
            title:info,
            icon:'none',
            duration:3000
        })
    }
}

export {Http}



//二次封装
import {Http} from './utils.js'
class User extends Http {
    getUsers(){
        return this.request('/users')
    }
}
export {User}

---

学习更多

小程序学习地图