Promise

Promise

1. 什么是Promise？
   1.解决回调地狱
   2.可以链式调用
2. 你对Promise的理解？
   有三种状态1.pending初始状态 2.fulfilled成功状态 3.rejected失败状态
3. Promise用过吗？
   封装ajax.axios的get.post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

Promise名词约定

一般有三种名词约定:

• promise(首字母小写)对象指的是"promise实例对象"
• Promise 首字母大写且单数形式，表示"Promise构造函数"
• Promises首字母大写且复数形式，用于指代"Promises规范"

什么是Promise

1.Promise,简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
2.聪语法上说，promise是一个对象，从它可以获取异步操作的最终状态(成功或失败)。
3.Promise是一个构造函数，对外提供统一的API，自己身上有all，reject，resolve等方法，原型上有then、catch等方法。

Promise的两个特点

1.Promise对象的状态不受外界影响

1. pending 初始状态
2. fulfilled 成功状态
3. rejected 失败状态
   Promise有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态

2.Promise的状态一旦改变，就不会再变,任何时候都可以得到这个结果，状态不可以逆，只能由pending变成fulfilled或者有pending变成rejected

小程序使用promise封装request请求

首先在根目录下创建一个文件夹，如我用的是http，然后在这个文件夹下创建一个js文件。这个js文件中写入

//封装微信网络请求模块 promise----》 wx.request()
export default (url,data,method)=>{ // 导出一个函数 函数中的 url是请求接口地址 data 是发送的参数 method 是请求方式
  return new Promise((resolve,rejects)=>{ // 返回一个 promise
    wx.request({
      url, //请求地址
      data, // 请求时携带的参数
      method, // 请求方式
      success(res){  // 请求成功指定的函数
        resolve(res); // 请求成功执行成功的回调，执行的是 then
      },
      fail(err){     // 请求失败执行的函数
        rejects()     // 请求失败执行的回调，执行的是 catch
      },
    })
  })
}

然后在创建一个js文件，如request.js文件，这个文件专门用来存放我们的请求接口的地址。代码如下

//接口地址 集合
export default {
  home:'/xxx',  // 这里写请求地址，一般我们写一个项目，baseUrl 是固定不变的，这时我们可以把后面那些不同的链接地址放到这里。
  list:'/list'  // 如这是列表页面请求的数据，
}

创建完这2个js后，我们可以在写一个js文件统一管理我们的请求。

//封装请求方法
import http from './http';   // 引入我们封装好的 wx.request 
import api from './request'; // 引入我们的请求接口  相当于引入了一个对象 如 {home:'/xxx',list:'/list}

let baseUrl = "http://xxx.xxx.com";   // 这里写我们请求地址共同的链接 

export default (data,method)=>{ // 导出
  return http(baseUrl+api.home,data,method); // 返回执行的函数 baseUrl+api 字符串拼接，拼接成完整的地址，data用来传参数，method用来定义请求方式
}

最后在我们项目根目录下的app.js文件中引入这个js文件即可

// app.js
import http from './http/api' // 引入我们封装的 wx.request
App({
  http  // 在这里挂载到属性上
})

然后哪个页面使用就在对应的js文件内引入

const app = new getApp() //引入我们的 app.js文件

   /** 生命周期函数--监听页面加载
   */
  onLoad: function () {
    app.http({},'get').then(res=>{  // 直接调用app中的方法即可 ,第一个参数可以向服务器传递参数，第二个参数是请求方式
      console.log(res);
    })  
  },

这样我们的封装就完成了