最近学习态度比较积极,打算用react做一个小个人应用网站...所以从阿里云上买了些免费的接口,什么QQ音乐排行查询接口、IP地址查询、天气预报等等。调用时,发现身份校验可以通过简单修改头部信息的方式,即向头部加入APPCODE的key,以及相应的值。

  但是之前没有用过请求头添加   so 记录学习下...

一、首先直接放demo

1、jQuery

var requestUrl = "http://ali-qqmusic.showapi.com/top?topid=6";
$.ajax({
type : "get",
url : requestUrl ,
dataType : "json" ,
success: function(data) {
console.log(data);
}.bind(this),
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "APPCODE .....................");
}
});

使用ajax的beforeSend方法向头部添加信息

2、fetch

let requestUrl = "http://ali-qqmusic.showapi.com/top?topid=6";
fetch(requestUrl, {
method: "get",
headers: {
Authorization: "APPCODE ......................"
}
}).then(response => response.json()).then(data => console.log(data)).catch(e => console.log(e));

哈哈哈哈,其实有点宠fetch,这个时用ES6来写。接下来来整理下相关API,以及简单介绍下fetch

二、记录jQuery ajax 时不时使用,但是快遗忘的API方法

ajax 常用的方法,什么url、type、dataType、success之类的就不提了

1、async  默认是true表示请求为异步请求,如果设置为false表示同步,ajax下面的方法要等请求结束后才会调用

2、beforeSend(xhr)   用于发送请求前修改XMLHttpRequest对象的函数,主要用作修改http头部,就像上面的demo

3、context   用于绑定回调函数的上下文,即this,设置了它就相当于在回调函数上加入了bind(context)一样

4、jsonp    用于跨域操作,重写回调函数的名字

5、timeout    请求超时时间

6、complete(xhr , ts)    无论请求成功or失败的回调函数

三、fetch

之前一直没用用过这种请求方式,现在看来这种请求方式代码显得十分的优美,毕竟Fetch API是基于Promises设计的。fetch是浏览器提供的原生网络请求接口,但是它的兼容性还是有所欠缺的,具体兼容情况如下图

常用的写法有两种

//方式一
fetch('./api/XXX.json')
.then(
function(response) {
if(response.status !== 200) {
console.log('Status Code: ' + response.status);
return;
}
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log(err);
});
//方式二
function status(response) {
if (response.status == 200) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('./api/XXX.json').then(status).then(json)
.then(function(data) {
console.log(data);
}).catch(function(err) {
console.log('err);
});

  在fetch方法中,首先返回的response对象,so 第一个then中的函数参数为res,然后通过响应的状态码判断请求是否成功,成功后调用response的json()方法,这个也是返回一个Promise对象,所以可以连续then,最后的catch可以抓取代码执行时的异常信息。

  然后就是fetch第一个参数为URL,第二个参数可以加入请求方式、头信息、表单信息等

fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})

  最后就是fetch中的一些坑,没遇到过,先记录下。

 1、Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})

 2、服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

搞定!!!

用ajax与fetch调用阿里云免费接口的更多相关文章

  1. 通过AccessKey调用阿里云CDN接口刷新CDN资源案例

    通过AccessKey远程调用阿里云CDN接口,快速实现自动化集成部署. CdnService.java package com.nfky.cdn; import com.aliyuncs.Defau ...

  2. C#调用阿里云CDN API刷新缓存

    使用CDN必须要解决CDN缓存的问题,要么在每次更新文件时生成不同的URL,要么在每次更新文件时刷新CDN缓存.我们在一个实际应用场景中用到了后者,所以需要调用阿里云CDN的API进行缓存刷新的操作. ...

  3. 使用Node.js调用阿里云短信的发送以及接收

    为了使用Node.js调用阿里云短信服务,我自己写了个npm包, 目前实现了: 使用Node.js调用阿里云短信服务,发送短信: 使用Node.js调用阿里云短信服务以及MNS服务,接收用户上行短信 ...

  4. Centos7.4下用Docker-Compose部署WordPress(续)-服务器端用Nginx作为反向代理并添加SSL证书(阿里云免费DV证书)

    前言 在我写完Centos7.4下用Docker-Compose部署WordPress这篇文章后,我的个人博客已经正式的开始运作.但考虑到网站访问的安全性以及今后可能会重复利用服务器来部署其他网站的可 ...

  5. 申请安装阿里云免费SSL证书

    微信小程序已经全面要求使用HTTPS服务了,还有苹果商店也是,所以,实现网站HTTPS已经很有必要.要实现HTTPS就需要一个SSL证书,证书大部分都很贵,不过也有一些免费的证书服务供个人开发者使用. ...

  6. 阿里云免费购买SSL证书,nginx无缝升级https

    最近在升级交流学习社区,觉得有必要升级成https.以下是自己在升级中记录. 以下包括以下部分: 一.阿里云免费购买SSL证书 1.自己在阿里云申请了免费的,然后自己支付0元,购买了SSL证书 2.我 ...

  7. 项目总结20:阿里云免费https证书申请

    项目总结20:阿里云免费https证书申请 1. 登录阿里云控制台 www.aliyun.com,用账户信息登录 2. 在”产品与服务”搜索SSL,选择SSL证书 3. 点击购买证书 4. 选择” S ...

  8. apache中的https设置基于阿里云免费ssl服务

    环境是:debian7+apache2.2+阿里云免费ssl服务,站点以前的http已经在运行了, 1.开通阿里云免费SSL&DNS解析配置 购买位置:打开阿里云找到“产品”-“安全”-“CA ...

  9. Python 调用阿里云 API 收集 ECS 数据

    #!/usr/bin/env python # coding: utf-8 # author: Wang XiaoQiang ''' 功能介绍: 1.调用阿里云API,收集所有区域 ECS 信息 2. ...

随机推荐

  1. Angularjs基础(学习整理)

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ...

  2. Vue2源码分析-逻辑梳理

    很久之前就看完vue1,但是太懒就一直没写博客,这次打算抽下懒筋先把自己看过了记录下来,否则等全部看完,估计又没下文了 看源码总需要抱着一个目的,否则就很难坚持下去,我并没做过vue的项目,我几乎很少 ...

  3. 47. leetcode 437. Path Sum III

    437. Path Sum III You are given a binary tree in which each node contains an integer value. Find the ...

  4. annotation-config, annotation-driven, compont-scan 区别

    <annotaion-driven/>标签: 这个标签对应的实现类是org.springframework.web.servlet.config.AnnotationDrivenBeanD ...

  5. 一步一步学Vue(十二)

    为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 componen ...

  6. strcpy.strcmp.strlen.strcat函数的实现

    #include <stdio.h> #include <string.h>   char *copy(char *a,char *b);//声明一个复制函数 char *ca ...

  7. LFLiveKit架构简介

    LFLiveSession LFLiveSession 是整个sdk的核心,提供对外部的主要接口.主要功能有:管理推流开关.管理音视频录制及渲染.管理录制渲染后的音视频编码.管理编码后的数据上传.管理 ...

  8. Apache崩掉:为进程配置合适的线程数

    放假以来,服务器Apache二次崩掉了,不能再拖了,找bug解决: 崩掉的具体状况是,服务器出现弹框显示:Apache停止工作: 顺手关掉这个可恶的小弹框,世界就清静了,服务器正常运行: 具体问题: ...

  9. .net core 2.0学习笔记(一):开发运行环境搭建

    期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...

  10. 再起航,我的学习笔记之JavaScript设计模式09(原型模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...