let p = new Promise(function (resolve, reject) {
setTimeout(function () {
let flag = false
if (flag) {
resolve(1);
} else {
reject(2);
}
}, 100<
20000
span class="token punctuation">)
})

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中有一个实例的状态发生改变（变为

fulfilled

或

rejected

），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对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如
```
JSON
```
，
```
BLOB
```
或者
```
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)
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航