<script>
var p = new Pormise(function(resolve, reject) {
// 这里实现异步调用
// 调用成功
resolve("success");
// 调用失败
reject("error");
});
p.then(function(data) {
// 成功的情况
},function(info) {
// 失败的情况
});
</script>
<script>
function request(url) {
// 创建一个 Promise 实例
var p = new Pormise(function(resolve, reject) {
// 获取与后台交换数据的对象 XMLHttpRequest
var xhr = new XMLHttpRequest();
/*
- readyState 改变时触发 onreadystatechange 事件
- readyState: XMLHttp 请求的当前状态
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
- status:响应状态码
200: "OK"
404: 未找到页面
*/
xhr.onreadystatechange = function() {
if(xhr.readyState != 4) {
return ;
}
if(xhr.readyState == 4 && xhr.status == 200) {
// 请求成功的情况,通过 responseText 属性来获取由服务器返回的数据
resolve(xhr.responseText);
} else {
// 处理请求失败
reject("请求失败");
}
}
/*
初始化一个请求
open(method, url, async, username, password)
method: 请求方式
url: 请求的地址
async: 请求是否异步,默认异步
userrname、password: 可选,为 url 的授权提供认证
*/
xhr.open("get", url);
/*
发送 http 请求
send(参数可选)
null: 代表只有 url 没有数据体。例如:get 请求
数据体:除了请求头信息还包含具体数据的数据体。例如:post请求
*/
xhr.send(null);
});
// 返会 Promise 实例
return p;
}
// 请求数据
request("http://localhost/first/data").then(
function(data) { // 参数1:处理请求成功的方法
console.log(data);
},function(info) { // 参数2:处理请求失败的方法,可以省略
console.log(info);
}
);
</script>
Fetch 是新的 Ajax 的解决方案,会返回一个 Promise Fetch 不是 Ajax 的进一步封装,而是原生 JS ,没有使用 XMLHttpRequest
<script>
// fetch的参数为请求的路径,默认为 get 请求
fetch("url")
.then(
function(data) { // 成功返回的 data 是一个 Promise 实例,不能直接拿到数据
// 需要使用 fetch 的方法 text() 取出数据
data.text();
},function(info) { // 失败返回的 info 我们可以直接拿到数据
}
);
</script>
get/delete
post/put
data.json() : 将返回的数据转为 json data.text() : 将返回数据转为字符串
get /delete请求
post/put请求
配置公共的请求头,配置之后再 url 中可以省略公共的请求头 axios.defaults.baseURL = 'http://localhost/test'; —————————— 配置超时时间 axios.defaults.timeout = 3000; —————————— 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/json';
拦截器分类
1.请求拦截器 请求拦截器的作用是在请求发送前进行一些操作。 2.响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作。
请求拦截器
响应拦截器
async 作为一个关键字放到方法前面 async 都会隐式的返回一个 Promise 实例 await 只能在 async 修饰的方法内使用,且 await 不能单独使用 await 后可以跟一个 Promise 实例
<script>
// 配置公共的请求头
axios.defaults.baseURL="http://localhost/test";
async function request() {
// 添加 await 之后,当前 await 返回结果之后才会执行下面的代码
var info = await.get("data1");
var ret = await axios.get("data2?info=" + info.data);
return ret.data;
}
request().then(function(data){
console.log(data);
});
</script>