Vue学习04

Author： jinxiaoliang
发布时间：May 8, 2020
2251views
No comments
6323 words
Categories： Vue

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

如果觉得我的文章对你有用，请随意赞赏

Vue学习04

jinxiaoliang • 2020 年 05 月 08 日

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

1.前后端交互模式

1.1 接口调用方式

1.2 URL地址格式

2.Promise用法

2.1 异步调用

2.2 Promise概述

2.3 Promise的基本用法

2.4 基于Promise发送Aajx请求

2.5 then参数中的函数返回值

2.6 Promise常用的API

3.接口调用-fetch用法

3.1 fetch概述

3.2 fetch的基本用法

3.3 fetch请求参数

3.4 fetch响应结果

4.接口调用-axios用法

4.1 axios的基本特性

4.2 axios的基本用法

4.3 axios常用的API

4.4 Get请求参数传递

4.5 axios响应结果

4.6 axios全局配置

4.7 axios拦截器

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

5.1 async/await基本用法

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