React Native 中 fetch的使用心得

最近在搞React Native 开发中,发现fetch与以前浏览器中使用XMLHttpRequest有一些差别;
XMLHttpRequest方式的用法,相信大家已经很熟悉了,这里就不介绍了。

fetch的基本用法GET、POST

先来看看普通的GET的请求:

// fetch(url,options).then().catch()
// url (required), options (optional)
fetch('http://nero-zou.com/test', {
method: 'GET'
}).then(function(response) {

}).catch(function(err) {
// Error Handle
});
fetch会返回一个Promise对象,返回的数据会在response参数中;

请求头(Request Headers)

通过 new Headers(),你也可以自由地设置请求头:

// 创建一个空的Headers 实例
var headers = new Headers();

// 添加 headers
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// 检测、获取、设置 header
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// 删除一个 header
headers.delete('X-My-Custom-Header');

// 创建时带上参数
var headers = new Headers({
'Content-Type': 'text/plain',
'X-My-Custom-Header': 'CustomValue'
});
你可以使用append, has, get, set, 和delete去修改request headers. Headers与Request的组合是这样的:

var request = new Request('http://ner-zou.com/test', {
headers: new Headers({
'Content-Type': 'text/plain'
})
});

fetch(request).then(function() { / handle response / });

响应(Response)

fetch返回的 then方法有一个response参数,它是一个Response实例。
Response有如下方法:

  1. clone() - 复制一份response

  2. error() - 返回一个与网络相关的错误

  3. redirect() - 返回了一个可以重定向至某URL的response.

  4. arrayBuffer() - 返回一个带有ArrayBuffer的Promise.

  5. blob() - 返回一个带有Blob的Promise.

  6. formData() - 返回一个带有FormData的Promise.

  7. json() - 返回一个带有JSON格式对象的Promise.

  8. text() - 返回一个带有文本的Promise.

下面看看fetch如何接受服务器端返回的JSON数据:

fetch('http://nero-zou.com/test.json').then(function(response) {
return response.json();// 转换为JSON
}).then(function(data) {
console.log(data); // data 就是一个JavaScript object
});
再加上一些错误处理:

fetch('http://nero-zou.com/test.json')
.then((response) => {
if (response.ok) {
return response.json()
} else {
console.error('服务器繁忙,请稍后再试;\r\nCode:' + response.status)
}
})
.then((data) => {
console.log(data)
})
.catch((err)=> {
console.error(err)
})
response.ok会将404、500等这些请求错误给过滤掉;

GET请求带上参数

官方推荐了一种写法:

var url = new URL("https://geo.example.org/api"),
params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(//)
但是URL这个方法,在React Native 中并没有实现,那么就只能我们自己来拼接url了,
这里我们对 GET请求封装一个方法:

/

  • 基于 fetch 封装的 GET请求
  • @param url
  • @returns {Promise}
    */
    export function R_GET(url, params) {
    if (params) {
    let paramsArray = []
    Object.keys(params).forEach(key => paramsArray.push(key + '=' + encodeURIComponent(params[key])))
    if (url.search(/\?/) === -1) {
    url += '?' + paramsArray.join('&')
    } else {
    url += '&' + paramsArray.join('&')
    }
    }
    return new Promise(function (resolve, reject) {
    fetch(url)
    .then((response) => {
    if (response.ok) {
    return response.json()
    } else {
    reject('服务器繁忙,请稍后再试;\r\nCode:' + response.status)
    }
    })
    .then((response) => {
    if (response && response.error_code === 0) {
    resolve(response)//response.error_code 是与服务器端的约定,非0就是错误
    } else {
    reject(response.message)//response.message也是与服务器端的约定,error_code !==0 就需要返回message
    }
    })
    .catch((err)=> {
    reject(_parseErrorMsg(err))
    })
    })
    }
    在服务器端(Express.js)中可以这么接收参数

//假如在客户端这么请求的话
//R_GET('http://nero-zou.com/test',{name:nero})
//等同于这样 fetch('/test?name=nero')

//...
router.get('/test', function (req, res) {
res.send({
error_code: 0,
data: {name: req.query.name},//这里的req.query.name 就是nero了
message: 'success'
});
});

POST数据给服务器

客户端可以这么写:

fetch('http://nero-zou.com/test', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json' //记得加上这行,不然bodyParser.json() 会识别不了
},
body: JSON.stringify({
name: "nero",
email: "Nero@Nero-zou.com"
})
});
在服务器端(Express.js)中可以这么接收数据

//...
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
//...

//... 省略其他无关代码
router.post('/test', function (req, res) {
res.send({
error_code: 0,
data: req.body,//把发过来的数据原封不动返回回去,这里只是举例
message: 'success'
});
});
一些参考文章:

  1. MDN 文档:Using Fetch

  2. 官方文档,够详细、权威,就是内容有点多

关键字:fetch, express, node

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部