目录
接口调用方式
-
原生ajax
-
基于jQuery的ajax
-
axios
一.Promise
-
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
-
主要解决异步深层嵌套的问题。
-
promise 提供了简洁的API,使得异步操作更加容易。
1.1 基于Promise发送Ajax请求
<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>1.2 Promise 基本API
1.2.1 实例方法
.then()
-
得到异步任务正确的结果
.catch()
-
获取异常信息
.finally()
-
成功与否都会执行
<script type="text/javascript">
/*
Promise常用API-实例方法
*/
// console.dir(Promise);
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')
// });
// --------------------------
// 两种写法是等效的
foo()
.then(function(data){
# 得到异步任务正确的结果
console.log(data)
},function(data){
# 获取异常信息
console.log(data)
})
# 成功与否都会执行（不是正式标准）
.finally(function(){
console.log('finished')
});
</script>1.2.2 静态方法
.all()
-
Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
.race()
-
Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
<script type="text/javascript">
/*
Promise常用API-对象方法
*/
// console.dir(Promise)
function queryData(url) {
return new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
}else{
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
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"
})
</script>二. http的请求方式
1、GET
向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中，例如在Web Application中，其中一个原因是GET可能会被网络蜘蛛等随意访问。Loadrunner中对应get请求函数：web_link和web_url
2、POST
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数：web_submit_data,web_submit_form
3、PUT
向指定资源位置上传其最新内容
4、DELETE
请求服务器删除Request-URL所标识的资源
5、OPTIONS
返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
6、HEAD
向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
7、TRACE
回显服务器收到的请求，主要用于测试或诊断。
8、CONNECT
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
9、PATCH
PATCH方法是新引入的，是对PUT方法的补充，用来对已知资源进行局部更新。
三.axios
Axios 是一个基于 promise 的 HTTP 请求库，可以用在浏览器和 node.js 中。官网
-
支持客户端发送Ajax请求
-
支持服务端Node.js发送请求
-
支持Promise相关用法
-
支持请求和响应的拦截器功能
-
自动转换JSON数据
-
axios 底层还是原生js的ajax实现, 内部通过Promise封装的
3.1 请求方式别名
为了方便起见，已经为所有支持的请求方法提供了别名。
-
axios.get(url[, config])
-
axios.post(url[, data[, config]])
-
axios.delete(url[, config])
-
axios.put(url[, data[, config]])
-
axios.options(url[, config])
-
axios.request(config)
-
axios.head(url[, config])
-
axios.patch(url[, data[, config]])
3.2 axios基础用法
-
get和 delete请求传递参数
-
通过传统的url 以 ? 的形式传递参数
-
通过/拼接形式传递参数
-
通过params参数形式传递参数
-
-
post 和 put 请求传递参数
-
通过data参数选项传递参数
-
// get请求
axios.get('请求地址(请求参数)', {
params: {
ID: 12345
}
}).then(res => {
console.log(res.data);
}).catch(err => {
console.log(err);
});
//post请求
axios.post('请求地址', {
//请求参数
}).then(res => {
console.log(res.data);
});
-
axios发送请求的写法(重要)
//完整的写法
axios({
method: '请求方式', // get post等
url: '请求地址',
//params和data选择其一
params: { // 拼接到请求行的参数, get请求的参数
xxx: xxx
},
data: { // 拼接到请求体的参数, post请求的参数
xxx: xxx,
}
}).then(res => {
console.log(res.data) // 后台返回的结果
}).catch(err => {
console.log(err) // 后台报错返回
})3.3 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.4 axios 拦截器
-
请求拦截器
-
请求拦截器的作用是在请求发送前进行一些操作
-
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
-
-
-
响应拦截器
-
响应拦截器的作用是在接收到响应后进行一些操作
-
例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
-
-
//请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
//任何请求都会经过这一步,在发送请求之前做些什么
config.headers.mytoken = 'nihao';
//这里一定要return 否则配置不成功
return config;
}, function(err){
//对请求错误做点什么
console.log(err)
});
//响应拦截器
axios.interceptors.response.use(function(res) {
//在接收响应做些什么
var data = res.data;
return data;
}, function(err){
//对响应错误做点什么
console.log(err)
});
扫一扫
2236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
