1.前后端交互模式

1.1 接口调用方式

  • 原生Ajax
  • 基于Jquery的ajax
  • fetch
  • axios

1.2 URL地址格式

1.传统形式的URL

  • 格式:schema://host:port/path?query#fragment

    • schema:协议。例如http、https、ftp等
    • host:域名或者ip地址
    • port:端口,http默认端口是80,可以省略
    • path:路径,例如a/ab/abc
    • query:查询参数,例如uname=lisi&age=12
    • fragment:锚点(哈希Hash),用于定位页面的某个位置
  • Restful形式的URL

    • http请求方式

      • GET 查询
      • POST 添加
      • PUT 修改
      • DELETE 删除

2.Promise用法

2.1 异步调用

  • 异步效果分析

    • 定时任务
    • Ajax
    • 事件函数
  • 多次异步调用的依赖分析

    • 多次异步调用的结果顺序不确定
    • 异步调用结果如果存在依赖需要嵌套

2.2 Promise概述

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

使用Promise主要有以下好处

  • 可以避免多层异步调用嵌套问题(回调地狱)
  • Promise提供了简介的API,是的控制异步操作更加容易

2.3 Promise的基本用法

  • 实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
  • resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取结果
var p = new Promise((resolve,reject) => {
        //成功时调用 resolve()
        //失败时调用 reject()
});
p.then(ret => {
        //从resolve得到正确结果
},ret => {
        //从reject得到错误结果
})

2.4 基于Promise发送Aajx请求

1.处理原生Ajax

function queryData(url) {
    var p = new Promise((resolve,reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState != 4) return;
            if(xhr.readState == 4 && xhr.status == 200) {
                resolve(xhr.responseText)
            } else {
                reject('error')
            }
        }
        xhr.open('get','url');
        xhr.send();
    })
    return p;
}
queryData(url).then(function(ret){
    //正确信息
    console.log(ret)
},function(data) {
    //错误信息
    console.log(data)
})

2.多次发送Ajax请求

queryData(url)
        .then(function(data) {
            console.log(data);
            return queryData(url1)
        })
        .then(function(data) {
            console.log(data)
            return queryData(url2)
        })
        .then(function(data) {
            console.log(data)
            return queryData(url3)
        })

2.5 then参数中的函数返回值

1.返回Promise实例对象

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

2.返回普通值

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

2.6 Promise常用的API

1.实例方法

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

2.对象方法

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

3.接口调用-fetch用法

3.1 fetch概述

1.基本特性

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

2.语法结构

fetch(url).then(fn)
          .then(fn1)
          ...
          .catch(fn2)

3.2 fetch的基本用法

fetch('/abc').then(data => {
    return data.text();
}).then(ret => {
    //这里才是最终得到的数据
    console.log(ret)
})

3.3 fetch请求参数

1.常用配置选项

  • method(String):http请求方式,默认为GET(GET,POST,PUT,DELETE)
  • body(String):http请求参数
  • header(Object):http请求头、默认为{}

2.GET请求方式的参数传递

  • 传统方式
fetch('/abc?id=123').then(function(data) {
    return data.text()
}).then(function(data) {
    console.log(data)
})
  • Restful
fetch('/abc/123',{
    method:'get'
}).then(function(data) {
    return data.text()
}).then(function(data) {
    console.log(data)
})

3.POST请求方式的参数传递

fetch('/abc',{
    method:'post',
    body: 'uname=lisi&pwd=123',
    headers: {
        'Content-type':'application/x-www-form-urlencoded'
}).then(data => {
    return data.text()
}).then(data => {
    console.log(data)
})

3.4 fetch响应结果

响应数据格式

  • text():将返回体处理成字符串类型
  • json():返回结果和JSON.parse(responseText)一样
fetch('/abc').then(data => {
    return data.json()
}).then(ret => {
    console.log(ret)
})

4.接口调用-axios用法

4.1 axios的基本特性

axios(官网https://github.com/axios/axios)是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征

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

4.2 axios的基本用法

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

4.3 axios常用的API

  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据

4.4 Get请求参数传递

1.Get参数传递

  • URL传递
  • 通过params传递
axios.get('/axios?id=123').then(ret => {
    console.log(ret)
})
axios.get('/axios/123').then(ret => {
    console.log(ret)
})
axios.get('/axios',{
    params: {
        id: 123
    }
}).then(ret => {
    console.log(ret)
})

2.Delete参数传递

  • 和get类似
axios.delete('/axios?id=123').then(ret => {
    console.log(ret)
})
axios.delete('/axios/123').then(ret => {
    console.log(ret)
})
axios.delete('/axios',{
    params: {
        id: 123
    }
}).then(ret => {
    console.log(ret)
})

3.POST参数传递

  • 通过选项传递参数(默认传递的是json格式的数据)
axios.post('/axios',{
    uname: 'lisi',
    age: 14
}).then(ret => {
    console.log(ret.data)

})
  • 通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');

axios.post('/api/test',params).then(ret => {
    console.log(ret.data)
})

4.5 axios响应结果

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

4.6 axios全局配置

  • axios.defaults.timeout = 3000;//超时时间
  • axios.baseURL = 'http://localhost:3000/app'//默认地址
  • axios.defaults.headers['myToken']='asas';//设置请求头

4.7 axios拦截器

1.请求拦截器
在发送请求之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config) {
    //在请求发出之前进行一些信息设置
    return config
},function(err){
    //处理响应的错误信息
})

2.响应拦截器
在获取数据之前对数据做一些加工处理

//添加一个请求拦截器
axios.interceptors.response.use(function(res) {
    //在请求发出之前进行一些信息设置
    return res
},function(err){
    //处理响应的错误信息
})

5.接口调用-async/await用法

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

5.2 async/await处理多个异步请求

async function queryData(){
    const info = await axios.get('/async1');
    const ret = await axios.get("/async2?info=" + info.data);
    return ret.data;
}
queryData.then(ret => {
    console.log(ret)
})
Last modification:May 8th, 2020 at 05:25 pm
如果觉得我的文章对你有用,请随意赞赏