Vue_promise

最新推荐文章于 2022-02-11 23:56:16 发布

valentinelzt

最新推荐文章于 2022-02-11 23:56:16 发布

阅读量107

点赞数

分类专栏： Notes

本文链接：https://blog.csdn.net/valentinelzt/article/details/106185265

版权

Notes 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

Promise

主要用于解决深层嵌套的问题
promise 提供了简洁的API 使得异步操作更加容易

<script type="text/javascript">
  /*
   1. Promise基本使用
         我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：		   resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
  */


  var p = new Promise(function(resolve, reject){
    //2. 这里用于实现异步任务  setTimeout
    setTimeout(function(){
      var flag = false;
      if(flag) {
        //3. 正常情况
        resolve('hello');
      }else{
        //4. 异常情况
        reject('出错了');
      }
    }, 100);
  });
  //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
  //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
  p.then(function(data){
    console.log(data)
  },function(info){
    console.log(info)
  });
</script>

基于Promise发送Ajax请求

<script type="text/javascript">
  /*
    基于Promise发送Ajax请求
  */
  function queryData(url) {
   #   1.1 创建一个Promise实例
    var p = new Promise(function(resolve, reject){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState != 4) return;
        if(xhr.readyState == 4 && xhr.status == 200) {
          # 1.2 处理正常的情况
          resolve(xhr.responseText);
        }else{
          # 1.3 处理异常情况
          reject('服务器错误');
        }
      };
      xhr.open('get', url);
      xhr.send(null);
    });
    return p;
  }
# 注意：  这里需要开启一个服务 
  # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
  queryData('http://localhost:3000/data')
    .then(function(data){
      console.log(data)
      #  1.4 想要继续链式编程下去 需要 return  
      return queryData('http://localhost:3000/data1');
    })
    .then(function(data){
      console.log(data);
      return queryData('http://localhost:3000/data2');
    })
    .then(function(data){
      console.log(data)
    });
</script>

Promise基本API

实例方法
.then()

得到异步任务正确的结果
.catch()
获取异常信息
.finally()
成功与否都会执行（不是正是标准）

<script type="text/javascript">
   /*
     Promise常用API-实例方法
   */
   // console.dir(Promise);
   function foo() {
     return new Promise(function(resolve, reject){
       setTimeout(function(){
         // resolve(123);
         reject('error');
       }, 100);
     })
   }
   // foo()
   //   .then(function(data){
   //     console.log(data)
   //   })
   //   .catch(function(data){
   //     console.log(data)
   //   })
   //   .finally(function(){
   //     console.log('finished')
   //   });

   // --------------------------
   // 两种写法是等效的
   foo()
     .then(function(data){
       # 得到异步任务正确的结果
       console.log(data)
     },function(data){
       # 获取异常信息
       console.log(data)
     })
     # 成功与否都会执行（不是正式标准） 
     .finally(function(){
       console.log('finished')
     });
 </script>

静态方法
.all()

Promise.all方法接收一个数组作为参数，数组中的对象（p1, p2, p3）均为promise实例（如果不是一个promise，该项会被Promise.resolve转化为一个promise）。它的状态由这三个promise决定
.race()
Promsie.race方法同样接收一个数组作为参数，当p1，p2，p3中有一个实例的状态发生改变（边为fulfilled或rejected），p的状态就跟着改变，并把第一个改变状态的promise的返回值，传给p的回调函数

<script type="text/javascript">
  /*
    Promise常用API-对象方法
  */
  // console.dir(Promise)
  function queryData(url) {
    return new Promise(function(resolve, reject){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState != 4) return;
        if(xhr.readyState == 4 && xhr.status == 200) {
          // 处理正常的情况
          resolve(xhr.responseText);
        }else{
          // 处理异常情况
          reject('服务器错误');
        }
      };
      xhr.open('get', url);
      xhr.send(null);
    });
  }

  var p1 = queryData('http://localhost:3000/a1');
  var p2 = queryData('http://localhost:3000/a2');
  var p3 = queryData('http://localhost:3000/a3');
   Promise.all([p1,p2,p3]).then(function(result){
     //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
   })
  Promise.race([p1,p2,p3]).then(function(result){
    // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
    console.log(result) // "HELLO TOM"
  })
</script>

fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）

<script type="text/javascript">
  /*
    Fetch API 基本用法
    	fetch(url).then()
   	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
  */
  fetch('http://localhost:3000/fdata').then(function(data){
    // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
    return data.text();
  }).then(function(data){
    //   在这个then里面我们能拿到最终的数据  
    console.log(data);
  })
</script>

fetch API中的HTTP请求

fetch(url，option).then()
HTTP协议，它给我们提供了很多方法，如POST、GET、DELETE、UPDATE、PATCH和PUT
- 默认的是get版本
- 需要再options对象中置顶对应的method method:请求使用的方法
- post和普通请求的时候，需要在options中设置请求头 headers 和 body

<script type="text/javascript">
    /*
          Fetch API 调用接口传递参数
    */
   #1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
    fetch('http://localhost:3000/books?id=123', {
        	# get 请求可以省略不写 默认的是GET 
            method: 'get'
        })
        .then(function(data) {
        	# 它返回一个Promise实例对象，用于获取后台返回的数据
            return data.text();
        }).then(function(data) {
        	# 在这个then里面我们能拿到最终的数据  
            console.log(data)
        });

  #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
    fetch('http://localhost:3000/books/456', {
        	# get 请求可以省略不写 默认的是GET 
            method: 'get'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #2.1  DELETE请求方式参数传递      删除id  是  id=789
    fetch('http://localhost:3000/books/789', {
            method: 'delete'
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   #3 POST请求传参
    fetch('http://localhost:3000/books', {
            method: 'post',
        	# 3.1  传递数据 
            body: 'uname=lisi&pwd=123',
        	#  3.2  设置请求头 
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

   # POST请求传参
    fetch('http://localhost:3000/books', {
            method: 'post',
            body: JSON.stringify({
                uname: '张三',
                pwd: '456'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });

    # PUT请求传参     修改id 是 123 的 
    fetch('http://localhost:3000/books/123', {
            method: 'put',
            body: JSON.stringify({
                uname: '张三',
                pwd: '789'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data)
        });
</script>

fetch API中的响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等

/*
  Fetch响应结果的数据格式
*/
fetch('http://localhost:3000/json').then(function(data){
  // return data.json();   //  将获取到的数据使用 json 转换对象
  return data.text(); //  //  将获取到的数据 转换成字符串 
}).then(function(data){
  // console.log(data.uname)
  // console.log(typeof data)
  var obj = JSON.parse(data);
  console.log(obj.uname,obj.age,obj.gender)
})

axios

基于promise用于浏览器和node.js的http客户端
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据

axios基础用法

get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
post 和 put 请求传递参数
- 通过选项传递参数
- 通过 URLSearchParams 传递参数

# 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
	# 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	#3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

axios全局配置

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios拦截器

请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
  - 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
  - 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

# 1. 请求拦截器 
axios.interceptors.request.use(function(config) {
     console.log(config.url)
     # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
     config.headers.mytoken = 'nihao';
     # 1.2  这里一定要return   否则配置不成功  
     return config;
   }, function(err){
      #1.3 对请求错误做点什么    
     console.log(err)
   })
#2. 响应拦截器 
   axios.interceptors.response.use(function(res) {
     #2.1  在接收响应做些什么  
     var data = res.data;
     return data;
   }, function(err){
     #2.2 对响应错误做点什么  
     console.log(err)
   })

async 和 await

async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码

# 1.  async 基础用法
# 1.1 async作为一个关键字放到函数前面
async function queryData() {
  # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
  var ret = await new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve('nihao')
    },1000);
  })
  // console.log(ret.data)
  return ret;
}
# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
queryData().then(function(data){
  console.log(data)
})

#2.  async    函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';

async function queryData() {
  # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
  
  var info = await axios.get('async1');
  #2.2  让异步代码看起来、表现起来更像同步代码
  var ret = await axios.get('async2?info=' + info.data);
  return ret.data;
}

queryData().then(function(data){
  console.log(data)
})

valentinelzt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_promise

Promise主要用于解决深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容易<script type="text/javascript"> /* 1. Promise基本使用我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 */ var p = new Pro
复制链接

扫一扫

专栏目录