2.Promise的then

• then 方法 一定会 返回一个 新的 Promise 对象
  • 如果 then 中的 回调函数 return 了一个 Promise对象，则 返回这个 对象
  • 如果 then 中的 回调函数 return 了一个 非Promise对象数据，则 自动创建新Promise对象，并将数据传入

let p1 = new Promise(function (resolve, reject) {
      let age = 1;
      if (age > 10) resolve && resolve('年龄大于10了哦')
      else reject && reject('呀，年龄不够呀~~')
    })
    .then(function (data) {
        let p2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve(123);
            }, 1000)
        });
        return p2;
    })
    .then(function (data) { // 此then 是调用了 p2 对象的（p2.then）
        // 如果 返回普通数据，则 内部会自动创建一个promise对象
        // let p3 = new Promise(function (resolve, reject) {
        //   resolve('hello')
        // })
        // return p3

        return 'hello';
    })
    .then(function (data) { // 此then是调用了then方法内部自动创建的 Promise对象p3
        console.log(data)
    })

3.Promise的 catch/finally

• catch 将 Promise对象的 失败回调函数 解耦，单独传递，语法上 更好看
• finally 不管 结果是 成功还是失败，都将要最后执行！

let p1 = new Promise(function (resolve, reject) {
      let age = 1;
      if (age > 10) resolve && resolve('年龄大于10了哦')
      else reject && reject('呀，年龄不够呀~~')
    })
    .then(function (data) {  // 给 resolve 参数传回调函数
        
    })
    .catch(function (data) {  // 给 reject 参数传回调函数
        
    })
    .finally(function () {
        
    })

4.Promise构造函数的方法

• Promise.all()
• Promise.race()

    let pm1 = new Promise(function (okcb, errcb) {
      setTimeout(function () {
        okcb('第1批货物已经 上岸了')
      }, 2000)
    })

    let pm2 = new Promise(function (okcb, errcb) {
      setTimeout(function () {
        okcb('第2批货物已经 上岸了')
      }, 5000)
    })

    let pm3 = new Promise(function (okcb, errcb) {
      setTimeout(function () {
        okcb('第3批货物已经 上岸了')
      }, 3000)
    })

    //all 方法 接收 多个 任务，并 返回一个 promise对象
    //                       通过 返回的promise对象.then 方法 获取 所有任务的返回值数组
    Promise.all([pm2, pm3, pm1]).then(function (resArr) {
      console.log('三批货安全到岸：', resArr)
    })

    //race 方法 接收 多个 任务，并 返回一个 promise对象
    //                        通过 返回的promise对象.then 方法 获取 第一个完成的任务返回值
    // 【注意】 不管谁先完成，剩下的 也会坚持执行完毕
    Promise.race([pm1, pm2, pm3]).then(function (res) {
       console.log('有一批货安全到岸，快跑：', res)
    })

// 通过 返回的 Promise对象 的 then 方法 获取 响应报文体对象 res
fetch('http://localhost:3000/fdata')
    .then(function (res) { // res 是 服务器返回的 响应报文 封装成的 对象
    // 通过 res.text() 获取 一个新的 promise对象，内部才包含 响应报文体的 内容文本
    return res.text();
})
.then(function (textStr) { // 返回的 promise对象的 then方法 ，接收 响应报文体的 内容文本
    console.log(textStr);
})

// POST请求传参 键值对传参------------------------------------
fetch('http://localhost:3000/books', {
  method: 'post',
  body: 'uname=lisi&pwd=123',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(function (data) {
    return data.text();
}).then(function (data) {
    console.log(data)
});

6.axios

相当于 一个 没有 dom操作的 jquery，只提供异步请求方法！

6.1 请求方式 - get

• 查询字符串

axios.get('http://www.yaoniub.com?id=1').then(function(res){
    console.log(res.data)
})

axios.get('http://www.yaoniub.com',{params:{ id:1 ,cate:'x'}}).then(function(res){
    console.log(res.data)         // http://www.yaoniub.com?id=1&cate=x
})

• 动态参数

axios.get('http://www.yaoniub.com/1').then(function(res){
    console.log(res.data)
})

6.2 请求方式 -post

• JSON

axios.post('http://www.zhenniubi.com',{id:1,name:'xmomo'}).then(function(res){
    res.data // 响应报文体数据
})

• urlencoded(键值对)

axios.post('http://www.zhenniubi.com','id=1&name=xmomo').then(function(res){
    res.data // 响应报文体数据
})

let params = new URLSearchParams();
params.append('id', '1');
axios.post('http://www.zhenniubi.com',params).then(function(res){
    res.data // 响应报文体数据
})

6.3 公共配置

• timeout 设置超时时间
• baseURL 设置基地址
• header 设置请求报文头 字段

axios.defaults.timeout = 2000

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';

// 配置请求头信息
axios.defaults.headers['Authorization'] = 'bearer token字符串';

// http://localhost:3000/axios-json 
axios.get('axios-json').then(function (ret) {
    console.log(ret.data.uname)
})

6.4 拦截器

• 请求拦截器：发送请求报文前 对 报文做最后的修改
• 响应拦截器：接收到响应报文后 立即 对 报文 做抢先修改
• 

 // 1.请求拦截器 ---------------------------------------------
// 执行时机：在生成请求报文 之后，发送 请求报文之前 调用
axios.interceptors.request.use(function (req) {
  req.headers.mytoken = 'nihao';
  // 返回 请求报文配置对象
  return req;
}, function (err) {
  console.log(err)
})

// // 2.响应 拦截器 --------------------------------------------
axios.interceptors.response.use(function (res) {
  // 将 响应报文对象 的 报文体数据 返回（传给了 axios.then 的 参数）
  return res.data;
}, function (err) {
  console.log(err)
})

// 3.发送请求: 发送请求之前会经过 请求拦截器，接收响应报文后 会先经过 响应拦截器
axios.get('http://localhost:3000/adata').then(function (data) {
  console.log(data)
})