标签：www stream rms tom script str efi account 服务器错误
使用XHR发送一个json请求一般是这样:
1 const xhr = new XMLHttpRequest() 2 xhr.open(‘Get‘, url) 3 xhr.responseType = ‘json‘ 4 5 xhr.onload = () => { 6 console.log(xhr.response) 7 } 8 9 xhr.onerror = () => { 10 console.log(‘error‘) 11 } 12 13 xhr.send()
使用fetch的实例:
1 fetch(url).then(response => response.json()) 2 .then(data => console.log(data)) 3 .catch(e => console.log(‘error‘, e))
input(必须) 定义要获取的资源(请求地址)
init(可选)
参数 | 描述
method 请求使用的方法，如GET、POST
headers http请求头（user-Agent, Cookie）
body 请求的body信息
mode
fetch可以设置不同的模式使得请求有效. 模式可在fetch方法的第二个参数对象中定义.
可定义的模式如下:
除此之外, 还有两种不太常用的mode类型, 分别是 navigate , websocket , 它们是 HTML标准 中特殊的值, 这里不做详细介绍.
credentials
omit（缺省值，默认为该值）、same-origin（同源，便是同域请求才发送cookie）、include（任何请求都带cookie）
cache
如果fetch请求的header里包含 If-Modified-Since, If-None-Match, If-Unmodified-Since, If-Match, 或者 If-Range 之一, 且cache的值为 default , 那么fetch将自动把 cache的值设置为 "no-store"
Fetch - response type
一个fetch请求的相应类型（response.type）为如下三种之一：
注意: 无论是同域还是跨域, 以上 fetch 请求都到达了服务器.
Fetch 常见坑
1.Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include‘})
默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头)
2.服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 reolve 的返回值的 ok 属性设置为 false， 想要精确判断fetch（）是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。HTTP状态码为200-299是才会设置为true）， 仅当网络故障时或请求被阻止时，才会标记为 rejec
使用Fetch封装request方法
http.js
1 import ‘whatwg-fetch‘; 2 3 const netErrorStatu = 1; // 网络错误 4 const serverErrorStatu = 2; // 服务器错误 5 const formatErrorStatu = 3; // 数据格式错误 6 const logicErrorStatu = 4; // 业务逻辑错误 7 8 const errorMsg = { 9 [netErrorStatu]: ‘网络错误‘, 10 [serverErrorStatu]: ‘服务器错误‘, 11 [formatErrorStatu]: ‘数据格式错误‘, 12 [logicErrorStatu]: ‘业务逻辑错误‘ 13 }; 14 15 class CustomFetchError { 16 constructor(errno, data) { 17 this.errno = errno; 18 this.msg = errorMsg[errno]; 19 this.data = data; 20 } 21 } 22 23 export function buildQuery(data) { 24 const toString = Object.prototype.toString; 25 26 const res = Object.entries(data).reduce((pre, [key, value]) => { 27 let newValue; 28 29 if (Array.isArray(value) || toString.call(value) === ‘[object Object]‘) { 30 newValue = JSON.stringify(value); 31 } else { 32 newValue = (value === null || value === undefined) ? ‘‘ : value; 33 } 34 35 pre.push(`${key}=${encodeURIComponent(newValue)}`); 36 37 return pre; 38 }, []); 39 40 return res.join(‘&‘); 41 } 42 43 export async function request(input, opt) { 44 // 设置请求默认带cookie 45 const init = Object.assign({ 46 credentials: ‘include‘ 47 }, opt); 48 49 let res; 50 // 仅当网络故障时或请求被阻止时，才会标记为 rejec 51 try { 52 res = await fetch(input, init); 53 } catch (e) { 54 throw new CustomFetchError(netErrorStatu, e); 55 } 56 // 仅HTTP状态码为200-299是才会设置为true 57 if (!res.ok) { 58 throw new CustomFetchError(serverErrorStatu, res); 59 } 60 61 let data; 62 // fetch()请求返回的response是Stream对象，调用response.json时由于异步读取流对象所以返回的是一个Promise对象 63 try { 64 data = await res.json(); 65 } catch (e) { 66 throw new CustomFetchError(formatErrorStatu, e); 67 } 68 // 根据和后台的约定设置的错误处理 69 if (!data || data.errno !== 0) { 70 throw new CustomFetchError(logicErrorStatu, data); 71 } 72 73 return data.data; 74 } 75 76 export function get(url, params = {}, opt = {}) { 77 const init = Object.assign({ 78 method: ‘GET‘ 79 }, opt); 80 81 // ajax cache 82 Object.assign(params, { 83 timestamp: new Date().getTime() 84 }); 85 86 const paramsStr = buildQuery(params); 87 88 const urlWithQuery = url + (paramsStr ? `?${paramsStr}` : ‘‘); 89 90 return request(urlWithQuery, init); 91 } 92 93 export function post(url, params = {}, opt = {}) { 94 const headers = { 95 ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ 96 }; 97 98 const init = Object.assign({ 99 method: ‘POST‘, 100 body: buildQuery(params), 101 headers 102 }, opt); 103 104 return request(url, init); 105 } 106 107 export default { 108 request, 109 get, 110 post 111 };
requset.js
1 import { notification } from ‘antd‘; 2 import Loading from ‘components/Loading‘; 3 import { LOGIN_URL } from ‘constants/basic‘; 4 import * as http from ‘./http‘; 5 6 const loading = Loading.newInstance(); 7 8 async function request(method, url, params, opt = {}, httpOpt) { 9 /** 10 * needLoading 是否添加loading图片 11 * checkAccount 验证未登陆是否跳登陆页面 12 * showErrorMsg 是都显示通用错误提示 13 */ 14 const { 15 needLoading = true, 16 checkAccount = true, 17 showErrorMsg = true 18 } = opt; 19 20 if (needLoading) { 21 loading.add(); 22 } 23 24 let res; 25 26 try { 27 res = await http[method](url, params, httpOpt); 28 } catch (e) { 29 if (checkAccount && e.errno === 4 && e.data.errno === 10000) { 30 location.href = LOGIN_URL; 31 } 32 33 if (showErrorMsg) { 34 notification.error({ 35 message: ‘提示信息‘, 36 description: e.errno === 4 ? e.data.msg : e.msg 37 }); 38 } 39 40 throw e; 41 } finally { 42 if (needLoading) { 43 loading.remove(); 44 } 45 } 46 47 return res; 48 } 49 50 export function get(...arg) { 51 return request(‘get‘, ...arg); 52 } 53 54 export function post(...arg) { 55 return request(‘post‘, ...arg); 56 }
github的代码地址: https://github.com/haozhaohang/library
标签：www stream rms tom script str efi account 服务器错误
原文地址：http://www.cnblogs.com/hzh-fe/p/7953717.html
