一、promise


1. 异步

  • JS 是但线程,一次只能执行一个任务,任务执行完后才能执行下一个,它会「阻塞」其他任务,这个任务可称为主线程

  • JS中常见的异步调用
    ① 定时任务
    ② Ajax
    ③事件函数

  • 异步模式可以一起执行多个任务,但是结果顺序不确定,结果依赖于请求的这个程序的顺序

  • 如许要规定结果打印的顺序就需要函数嵌套,但是函数嵌套会形成回调地狱,于是就需要用到 promise

2. Promise

Promise 是异步编程的一种解决方案,Promise 是一个函数,函数也是对象,可以当作构造函数 new 出来

使用:

  • new 实例化 Promise 对象
  • 再定义处理的方案,自定义名 resolvereject 处理成功和失败,这两个参数都是方法可以直接调用
  • 然后通过 p.then 处理结果
 let p = new Promise(function (resolve, reject) {
     setTimeout(function () {
         let flag = false
         if (flag) {
             resolve(1);
         } else {
             reject(2);
         }
     }, 100)
 })
 
 p.then(function (data) {
     console.log(data);
 }, function (info) {
     console.log(info);
 })

3. 基于Promise发送Ajax请求

1.返回promise实例对象

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

2.返回普通值

如果 .then 返回的是一个普通值,那么这个 then 会自动产生一个默认的 promise 对象,保证下一个 then 的使用,可以继续进行链式操作

  <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>

4. Promise 基本API

实例方法

  • .then()
    得到异步任务正确的结果

  • .catch()
    获取异常信息

  • .finally()
    成功与否都会执行(不是正式标准)

静态方法(对象方法)

  • .all()
    并发处理多个异步任务,所有任务都执行完了才能得到结果

Promise.all方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

  • .race()
    并发处理多个异步任务,只要有一个任务执行完了就能得到结果

Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变(变为fulfilledrejected),p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数

    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"
    })


二、接口调用 fetch

  • Fetch API 是新的ajax解决方案
  • fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
  • fetch(url, options).then()
 // 先用 then 的方式得到 text 的数据
 fetch('/wwwww').then(data=>{
 // text 是 fetch 的一部分 返回值是一个 promise 实例对象 用于获取后台返回的数据
     return data.text()
 // 然后通过下一个 then 得到具体的数据
 }).then(ret=>{
     console.log(ret);
 })

fetch API 中的 HTTP 请求

  • fetch(url, options).then()
  • HTTP协议,它给我们提供了很多的方法,如POST,GET,DELETE,UPDATE,PATCH和PUT
    • 默认的是 GET 请求
    • 需要在 options 对象中 指定对应的 method method:请求使用的方法
    • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
//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)
    });

fetchAPI 中 响应格式

  • text() 将返回体处理成字符串类型
  • json() 返回结果和 JSON.parse(responseText) 一样
  • 用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSONBLOB或者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数据
  • 能转换请求和响应数据

1. axios 基础用法

 axios.get('/www')
 .then(ret=>{
     // data 的名字是固定的,它用于获取后台响应的数据
     console.log(ret.data);
 })

查询数据 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)
 })

2. 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';

3. 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)
 })
Logo

前往低代码交流专区

更多推荐