一、微信小程序运行环境

　　微信小程序的 javascript 运行环境和浏览器不同，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，JsCore中也没有 XmlhttpRequest对象，所以jquery 、zepto、axios这些在小程序中都不能用。在微信小程序中，可以使用官方提供的wx.request进行异步请求操作

　　二、原生语法发送异步请求

　　在不进行封装的情况下，我们在项目的页面当中，可以小程序官方提供的API发起异步请求，例如:

　　wx.request({

　　url: 'https://domain.com/1.1/classes/Stu',

　　method:'POST',

　　header:{

　　'X-LC-Id': '自己的id',

　　'X-LC-Key': ' 自己的key',

　　'Content-Type': ' application/json'

　　},

　　data:{

　　"name":"张无忌",

　　"score":80,

　　"gender":1

　　},

　　success:(res)=>{

　　console.log(res);

　　}

　　})

　　三、自定义封装异步请求

　　当然，从上面的异步请求代码可以看出，如果我们在每一个页面中，都直接用wx.request发起请求，会导致如下情况:

　　1. baseURL没有统一提取，不方便开发环境、生产环境之间的灵活切换

　　2. header请求头所携带的信息，需要每次异步请求的时候手动追加

　　3. 代码冗余度高

　　所以我们可以基于Promise对象，将wx.request进行二次封装

　　let base = 'https://domain.com/1.1'

　　function fetchData(url,data,method="GET"){

　　return new Promise((resolve,reject)=>{

　　wx.request({

　　url: base+url,

　　method,

　　header:{

　　'X-LC-Id': '自己的id',

　　'X-LC-Key': ' 自己的key',

　　'Content-Type': ' application/json'

　　},

　　data,

　　success:(res)=>{

　　resolve(res) //此处的res会交给then

　　},

　　fail:(err)=>{

　　reject(err) //此处的err会交给catch

　　}

　　})

　　})

　　}

　　function post(url,data={}){

　　return http(url,data,'POST')

　　}

　　function get(url,data={}){

　　return http(url,data,'GET')

　　}

　　module.exports = {

　　fetchData,

　　post,

　　get

　　}

　　封装之后，我们可以将封装的模块在app.js中，挂载至全局属性

　　// app.js

　　let request = require('./utils/request')

　　App({

　　onLaunch: function() {},

　　...request

　　})

　　后续在项目页面中需要发起异步请求的时候，只需要通过getApp()调用全局挂载的异步方法发起请求，极大降低代码冗余度，提高开发效率。

　　Page({

　　bindViewTap(){

　　let data = {

　　"name":"张无忌",

　　"score":80,

　　"gender":1

　　}

　　getApp().post('/classes/Stu',data).then(res=>{

　　console.log(res)

　　})

　　}

　　})

　　四、使用fly.js处理异步请求

　　当然，我们自己封装的异步模块，很多时候，它的拓展性，复用性各方面的完善度相对较低。所以我们也可以采用一款开源的，支持微信小程序平台的异步请求库 fly.js 来完成项目中的异步请求。

　　1.首先下载fly.js提供的适配微信小程序的异步请求模块，将其存放之项目的lib目录下

　　下载地址:

　　https://github.com/wendux/fly/tree/master/dist/npm/wx.js

　　2.对fly.js方法进行全局配置封装，添加拦截器等操作_//添加响应拦截器，响应拦截器会在then/catch处理之前执行

　　编辑切换为居中

　　添加图片注释，不超过 140 字(可选)

　　var Fly=require("../lib/wx") //wx.js为您下载的源码文件

　　// var Fly=require("flyio/dist/npm/wx") //npm引入方式

　　var fly=new Fly(); //创建fly实例

　　//添加请求拦截器

　　fly.interceptors.request.use((config,promise)=>{

　　//给所有请求添加自定义header

　　config.headers["X-Tag"]="flyio";

　　return config;

　　})

　　//添加响应拦截器，响应拦截器会在then/catch处理之前执行

　　fly.interceptors.response.use(

　　(response) => {

　　//只将请求结果的data字段返回

　　return response.data

　　},

　　(err) => {

　　//发生网络错误后会走到这里

　　//return Promise.resolve("ssss")

　　}

　　)

　　//配置请求基地址

　　fly.config.baseURL="https://domain.com/1.1"

　　fly.config.headers={

　　'X-LC-Id': '自己的id',

　　'X-LC-Key': ' 自己的key',

　　'Content-Type': ' application/json'

　　}

　　1. 在项目页面中，可以直接使用封装后的fly模块进行异步请求

　　Page({

　　//事件处理函数

　　bindViewTap: function() {

　　let data = {

　　"name":"张无忌",

　　"score":80,

　　"gender":1

　　}

　　fly.post('/classes/Stu',data).then((d)=>{

　　//输出请求数据

　　console.log(d.data)

　　//输出响应头

　　console.log(d.header)

　　}).catch(err=>{

　　console.log(err.status,err.message)

　　})

　　...

　　})

　　})

上一篇

如何添加CSS_外部样式

下一篇

网站的化妆师——CSS基础