调整请求 beforeXHR

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 Semantic UI 的 API 正式发出请求之前,我们可以去调整一下请求的 XHR 对象 ... 比如给请求添加一些额外的头部信息 ..

我们在用 POST 方法请求提交新内容的时候,要求我们通过身份验证才行 .. 最简单的身份验证就是 HTTP Basic .. 这种方法可以用在开发的时候做调试 .. 实施这种验证身份的方法很简单,只需要在请求的时候,添加一个叫 Authorization 的头部信息 .. .信息的内容就是一个 Basic 空格 ... 加上使用 Base64 编码的用户名与密码 ...

这种方法只能用在开发测试的时候 ... 在生产环境上不能用这种验证身份的方法 .. 因为这样做并不安全 ..

调整 XHR 对象 .. 可以在这个 api 对象里添加一个 beforeXHR .. 意思是在发出 XHR 请求之前 .. 也就是 Ajax 请求 .. 它的值是一个匿名函数 .. 这个函数接收一个参数 .. 就是 xhr ..

我们可以再去设置一下要添加的头部信息 .. .使用 xhr 的 setRequestHeader 这个方法 .. 它的第一个参数是头部的名字 .. 输入 Authorization ... 具体的内容是一个 Basic ,加上一个空格 .. 后面是使用 Base64 编码的用户名冒号密码 .. 这里可以用一个 btoa 这个函数去把字符串编码成 Base64 的形式 .. 用户名 . 加上冒号 .. 然后是密码 .. 这个用户名还有密码就是登录 WordPress 网站用的 .. 最后再返回 xhr 这个对象 ..

beforeXHR: function (xhr) {
xhr.setRequestHeader('Authorization', 'Basic ' + btoa('wanghao' + ":" + '111111'));
return xhr;
}

保存 ... 再点击 执行 .. 这回没有提示权限不够 .. 因为我们使用了 HTTP Basic 方法通过了身份验证 .. 这里会返回创建的文章内容 ...

再打开 Network .. posts .. 请求方法是 POST .. 状态码是 201 .. 意思创建成功 .. 再看一下 Preview ... 这里就是服务端创建了文章并且给我们返回来的这个文章 ... 如果想利用这个响应回来的内容,可以在 API 的配置对象里添加一个 onSuccess 属性 .. . 在这个方法里可以处理响应回来的数据 ..

我们再去看一下 WordPress 的后台 .. 打开 文章 .. 在这里你会看到我们用 Semantic UI 的 API 创建的文章内容 ..

调整请求 beforeXHR《 Semantic UI 应用接口 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点