JavaScript
10 分钟 读完 (大约 1509 个字)

Promise相关

Promise

ES6 原生提供了 Promise 对象。所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

1.Promise用法

1.1 异步调用

  • 异步效果分析

    • 定时任务 setTimeout setInterver

    • Ajax 异步ajax请求（jqurey）

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      var ret = ''
      $ajax{(
      	url:'http://localhost:3000/...',
      	success: function(data){
      		console.log(data)
      		ret = data;
          	console.log(ret)  // 这里可以
      	}
      )}
      console.log(ret)  // 这里的ret是获取不到里面的东西的
      // 只能在回调函数中，获得值

    • 事件函数

  • 多次异步调用的依赖分析

    • 多次异步调用的结果顺序不确定

    • 异步调用结果如果存在依赖，那么我们需要多次多次嵌套，就是传说中的“十八层地域”，回调地狱。

1.2 Promise 概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

  • 可以避免多层异步调用嵌套问题（回调地狱）。
  • Promise对象提供了简介的API，使得控制异步操作更加容易

1.3 Promise 基本用法

  • 实例化Promise 对象，构造函数中传递函数，该函数中用于处理异步任务

  • resolve和reject两个参数（都是方法，可以调用）用于处理成功和失败两种情况，并通过p.the获取处理结果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var p = new Promise(function(resolve, reject){
        // 成功时调用 resolve()
        // 失败时调用 reject()
    })
    p.then(function(ret){
        // 返回成功的结果ret
    },function(error){
        // 返回失败的结果
    }) 

    -------------------------------------------------
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            var flag = true
            if(flag) {
                // 正常情况
                resolve('hello')
            }else {
                // 异常情况
                reject('出错')
            }
        }, 100)
      })
    p.then(function(data){
        console.log(data)
    },function(error){
      console.log(error)
    })

1.4 基于Promise处理Ajax请求

  1. 处理原生Ajax

1.5 then参数中的函数返回值

1.返回Promise实例对象

  • 返回的该实例对象会调用下一个then

2.返回普通值

  • 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

1.6 Promise常用的API

1.实例方法（在原型中的方法，需要用实例去调用）

  • p.then() 得到异步任务的正确结果
  • p.catch() 获取异常信息
  • p.finally() 成功与否都会执行（尚且不是正式标准）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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')
    });

2.对象方法

  • Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
  • Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

2 接口调用 -fetch用法

2.1 基本特性

  • 更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr的升级版
  • 基于Promise实现

2.2 语法结构

fetch(url).then(fn2)

​ .then(fn3)

​ …

​ .catch(fn)

1
2
3
4
5
fetch('http://localhost:3000/fdata').then(function(data){
    return data.text(); //text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(function(data){
    console.log(data)
})

2.3 fetch请求参数

  1. 常用配置选项
    • method(String): HTTP请求方法，默认为GET POST PUT DELETE
    • body(String): HTTP请求参数
    • header(Object): HTTP的请求头，默认为{}

3. axios 用法

3.1 axios 的基本特性

axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端

它有以下特性：

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据

3.2 axios 的基本用法

1
2
3
4
5
axios.get('/adata')
	.then(ret => {
    //data属性名称是固定的，用于获取后台响应的数据
    console.log(ret.data)
})

3.3 axios 常用API

  • get： 添加数据
  • post： 删除数据
  • put： 修改数据
  • delete： 删除数据
  1. GET 传递参数
    • 通过 URL 传递参数
    • 通过params 选项传递参数
1
2
3
4
5
6
7
8
9
axios.get('/adata?id=123')
	.then(ret => {
		console.log(ret.data)
	})

// 后台接口
app.get('/axios',(req,res) => {
    res.send('axios get 传递参数' + req.query.id)
})
1
2
3
4
5
6
7
8
9
axios.get('/adata/123')
	.then(ret => {
		console.log(ret.data)
	})

// 后台接口
app.get('/axios/:id',(req,res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
1
2
3
4
5
6
7
8
axios.get('/adata',{
	params:{
		id:123
	}
})
.then(ret => {
	console.log(ret.data)
})

  1. POST 传递参数

    axios.post(‘http://localhost:3000/axios’,{

    ​ uname: ‘lily’

    ​ pwd: 123

    }).then(function(ret){

    ​ console.log(ret.data)

    })

    post传参，这样默认传过去的是以json格式传

3.4 axios 的响应结果

响应结果的主要属性（axios自己包装了，有这些属性

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息

3.5 axios 的全局配置

axios.defaults.timeout = 3000； //超时时间

axios.defaults.aseURL = ‘http://localhost:3000/app’; //默认地址

axios.defaults.headers[ ‘mytoken’ ] = ‘xxxx’ //设置请求头

3.6 axios 的拦截器

  1. 请求拦截器

    在请求发出之前设置一些信息

    //添加一个请求拦截器 token拦截

    axios.interceptors.request.use(function(config){

    ​ // 在请求发出之前进行一些信息设置

    ​ config.headers.mytoken = ‘ nihao’

    ​ return config

    }，function（err）{

    // 处理响应的错误信息

    })

    2.响应拦截器

    在获取数据之前，对数据做一些加工处理

    添加一个响应拦截器

    axios.interceptors.request.use(function(res){

    ​ // 在这里对返回的数据进行处理

    ​ return res

    }，function（err）{

    // 处理响应的错误信息

    })

4. 接口调用 -async /await用法 （常用）

  • async/await是ES7 引入的新语法，可以更加方便的进行一步操作
  • async 关键字用于函数上（async函数的返回值是Promise实例对象）
  • await 关键字用于async 函数当中（await可以得到异步的结果）

async function queryData(id){

​ const ret = await axios.get(‘/data’)

​ return ret;

}

queryData.then(ret => {

​ console.log(ret)

})

#
TypeScript01
vue搭建appweb

评论

关注我
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×