前后端交互概述与URL地址格式

JS中常见的异步调用:
定时任务
ajax
事件函数 接口调用方式:
原生ajax
基于jQuery的ajax
fetch
axios url 地址格式:
传统的url
Restful形式的url

Promise(主要解决异步操作深层调用的问题)

Promise的作用:
把回调函数代码分离出来,在异步操作执行完后,用链式调用的方法执行回调函数。 Promise有三种状态: pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构可以改变其状态。 promise 的过程一般只有两种:
pending->resolved
pending->rejected promise 对象还有一个比较常用的then方法,用来执行回调函数:
then 方法接受两个参数,第一个是成功的 resolved 的回调,另一个是失败 rejected 的回调,第二个失败的回调参数可选。
并且 then 方法里也可以返回 promise 对象,这样就可以链式调用了。

Promise api(ES6)

  1、Promise.resolve()

  2、Promise.reject()

  3、Promise.prototype.then()    //串行执行任务(不论成功或失败都会被调用)

  4、Promise.prototype.catch()    //reject只会将参数传递给catch方法

  5、Promise.all()    //所有的都有完成,相当于“且”,返回结果数组(并行执行任务)

  6、Promise.race()    //完成一个即可,相当于“或”

基本使用

<script type="text/javascript">
/**
* 基于Promise发送 原生Ajax请求
*/
function queryData(url) {
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) {
//处理正常的情况:一旦调用 resolver 就会调用下一步的 then
resolve(xhr.responseText);
} else {
//处理异常情况
reject('服务器错误');
}
};
//获取连接
xhr.open('get', url);
//发送请求
xhr.send(null);
});
return p;
} //发送多个Ajax请求并且保证顺序
queryData('http://localhost:3000/data')
.then(function (data) {
console.log(data)
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 链式调用时 then 的返回值

then 方法里接受两个函数作为参数,分别是 resolve 和 reject 后执行的回调。
他返回的是一个新的 Promise 实例(不是原来那个 Promise 实例)。 return 值(无return的情况下就返回undefined,也是返回值):
在后面的then中就可以接收到数据了。 throw error:
返回的 Promise 会成为Rejected(已失败)的状态,下一步执行catch中的回调函数或者then的第二个回调函数参数。
catch为then的语法糖,它是then(null,rejection)的别名,也就是说catch也是then,它用于捕获错误。 return Promise:
手动return Promise, 能够按顺序执行每个异步回调中的内容。

Ajax 使用步骤

1.创建XmlHttpRequest对象

2.注册监听的回调函数

3.调用open方法设置基本请求信息

4.设置发送的数据,发送请求

JQuery Ajax

JQuery ajax 是对原生XHR的封装

$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});

XMLHttpRequest 和 Ajax 的关系

ajax 最核心的依赖是浏览器提供的 XMLHttpRequest 对象。

所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。

fetch( fetch() 返回的是一个Promise对象 )

fetch api 可以结合 async 和 await 来使用的。 

fetch 是一种 HTTP 数据请求的方式,是 XMLHttpRequest 的一种替代方案。
fetch 不是 Ajax 的进一步封装,而是原生js。
Fetch函数就是原生js,没有使用XMLHttpRequest对象。 1、第一个参数是URL,第二个是可选参数,可以控制不同配置的 init 对象( fetch(url, options).then() )
2、使用了 JavaScript Promises 来处理结果/回调 fetch('http://localhost:3000/data')
.then(function(data){
//text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
return data.text();
}).then(function(data){
//在这个then里面我们能拿到最终的数据
console.log(data);
}) //GET请求
fetch('http://localhost:3000/books?id=123', { //restful形式的URL:http://localhost:3000/books/456
//get 请求可以省略不写 默认的是GET
method: 'get'
}).then(function(data) {
//它返回一个Promise实例对象,用于获取后台返回的数据
return data.text();
}).then(function(data) {
//在这个then里面我们能拿到最终的数据
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.json(); 将获取到的数据使用 json 转换成对象
return data.text(); //将获取到的数据 转换成字符串
}).then(function(data) {
console.log(data)
});

axios( axios.get() 返回的是一个Promise对象 )

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基于 promise,用于浏览器和node.js的http客户端。

	1. 能拦截请求和响应。

	2. 自动转换JSON数据。

	3. 能转换请求和响应数据。

axios基础用法:

	get 和 delete请求传递参数:
1. 通过传统的url 以 ? 的形式传递参数
2. restful 形式传递参数
3. 通过 params 形式传递参数 post 和 put 请求传递参数:
1. 通过选项传递参数
2. 通过 URLSearchParams 传递参数 //发送GET请求
axios.get('http://localhost:3000/data')
.then(function(ret){
//拿到 ret 是一个对象,所有的对象都存在 ret 的 data 属性里面。
//注意data属性是固定的用法,用于获取后台的实际数据
console.log(ret.data)
}) //请求传递参数
1. 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123')
2. restful 形式传递参数
axios.get('http://localhost:3000/axios/123')
3. 通过 params 形式传递参数
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}) 4. 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
5. 通过选项
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
})

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/json';

axios 拦截器

请求拦截器:
请求拦截器的作用是在请求发送前进行一些操作。
例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。 响应拦截器:
响应拦截器的作用是在接收到响应后进行一些操作。
例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。 # 1. 请求拦截器
axios.interceptors.request.use(function(config) {
//任何请求都会经过这一步,在发送请求之前做些什么
config.headers.token = 'nihao';
//这里一定要return,否则配置不成功
return config;
}, function(err){
//对请求错误做点什么
console.log(err)
}); # 2. 响应拦截器
axios.interceptors.response.use(function(res) {
//在接收响应做些什么
var data = res.data;
return data;
}, function(err){
//对响应错误做点什么
console.log(err)
});

async 和 await(让异步代码看起来、表现起来更像同步代码)

async 作为一个关键字放到函数前面,任何一个 async 函数都会隐式返回一个 promise。

await 关键字只能在使用 async 定义的函数中使用,await后面可以直接跟一个 Promise实例对象(不能单独使用)。

async 基础用法

	//async作为一个关键字放到函数前面
async function queryData() {
//await关键字只能在使用async定义的函数中使用,await后面可以直接跟一个Promise实例对象。
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){resolve('nihao')},1000);
}); return ret;
} //任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function(data){console.log(data)}); //async 函数处理多个异步函数
async function queryData() {
//添加await之后 当前的await返回结果之后才会执行后面的代码。
var info = await axios.get('async1');
//让异步代码看起来、表现起来更像同步代码
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
} queryData().then(function(data){console.log(data)});

Vue.js(五)的更多相关文章

  1. Vue.js 系列教程 ②

    这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件,Props 以及 Slots.这不是一个完整的指南,而是基础知识的概述,所以你可以了解Vue.js ...

  2. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  3. Vue.js 系列教程 4:Vuex

    这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理. 这不是一个完整的指南,而是基础知识的概述,所以你可以了解 Vue.js 以 ...

  4. Vue.js 系列教程 5:动画

    原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...

  5. Vue.js 系列教程 2:组件,Props,Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  6. vue学习(一)、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  7. Vue.js 系列教程 3:Vue

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  8. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  9. Vue.js最佳实践(五招让你成为Vue.js大师)

    对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁 ...

  10. Vue.js最佳实践(五招助你成为vuejs大师)

    转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...

随机推荐

  1. nyoj 83:迷宫寻宝(二)(计算几何)

    题目链接 枚举所有墙的2n个端点与宝物的位置作为一条线段(墙的端点必定与边界重合), 求出与之相交的最少线段数(判断线段相交时用跨立实验的方法),+1即为结果. #include<bits/st ...

  2. Activity(工作流-1)

    1.activity自带数据表的含义(23张表) (1)资源库流程规则表 1)act_re_deployment 部署信息表 2)act_re_model  流程设计模型部署表 3)act_re_pr ...

  3. pycharm 进入Pythonshell脚本调试

  4. 【Dart学习】--之Runes与Symbols相关方法总结

    一,Runes 在Dart中,Runes代表字符串的UTF-32字符集, 另一种Strings Unicode为每一个字符.标点符号.表情符号等都定义了 一个唯一的数值 由于Dart字符串是UTF-1 ...

  5. BZOJ 2547: [Ctsc2002]玩具兵(二分答案+二分图匹配)

    传送门 解题思路 可以发现天兵不用管,答案的一个上界是\(2*k\),就是天兵一个个换.刚开始写了个拆\(6\)点的网络流,调了半天发现自己假了..说说正解,首先可以发现交换士兵其实就是种类的交换,那 ...

  6. BUUCTF | 高明的黑客

    这一题一开始我没有理解"www.tar.gz"的涵义,还以为有一个其他的网站叫这个,后来才突然顿悟他也有可能是一个目录!!!地址栏输入”/www.tar.gz“ 然后就可以得到源码 ...

  7. 【ERP知识】一个VMI(供应商管理库存)实现方案

    VMI,Vendor Managed Inventory,供应商管理库存 是指客户不采购或尽量少采购物料,而是由供应商保证该物料有充足的数量,在客户需要的时候能按时提供. 这样可以降低客户方的库存成本 ...

  8. JPA project Change Event Handler问题解决

    eclipse使用的是有经常会出现JPA project Change Event Handler(watering)很卡 网上的解决办法是 [Help > Installation Detai ...

  9. 富文本编辑器——百度UEditor插件安装教程

    一.使用环境 Win7 Eclipse jettty9 chrome 二.下载百度UEditor插件 1.下载地址:http://ueditor.baidu.com/website/download. ...

  10. Oracle 11g 体系结构 --SGA PGA 前后台进程

    Oracle服务器主要由实例.数据库.程序全局区.前台进程 实例:用来提供管理数据库的功能 数据库:由Oracle数据库文件组成,用来存储系统数据 ;一般有:数据文件.控制文件.重做日志文件 而实例可 ...