接口调用fetch

最新推荐文章于 2021-11-17 11:31:14 发布

草莓味的狮子座leo

最新推荐文章于 2021-11-17 11:31:14 发布

阅读量181

点赞数

分类专栏： Vue.js 文章标签：接口 vue.js

本文链接：https://blog.csdn.net/Mikon_0703/article/details/109989909

版权

Vue.js 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

接口调用Fetch

在这里插入图片描述

GET请求

app.get('/books', (req, res) => {
    res.send('传统的url传递参数' + req.query.id)

})
app.get('/books/:id', (req, res) => {
    res.send('Restful的url传递参数' + req.params.id)

})

POST请求

 fetch('http://localhost:3000/books', {
                   method: 'post',
                   body: 'uname=list&pwd=123',
                   headers: {
                       'Content-Type': "application/x-www-form-urlencoded"
                   }
               })
               .then(function(data) {
                   return data.text()
               }).then(function(data) {
                   console.log(data)
               })



app.post('/books', (req, res) => {
    res.send('POST的url传递参数' + req.body.uname + req.body.pwd)

// body-parser提供body
// 支持json数据格式
})

PUT请求
fetch响应结果
return data.text() :将返回体处理为字符串类型
returndata.json()：返回结果和JSON.parse(responseText)一样

 //  fetch响应结果的数据格式  
        fetch('http://localhost:3000/json')
            .then(function(data) {
                return data.json()
             // return data.text()
            }).then(function(data) {
                // console.log(data.uname)
                // console.log(typeof data)object
                console.log(data)
或者 
	   // var obj = JSON.parse(data)
	// obj.name,obj,age,obj.gender
            })


app.get('/json', (req, res) => {
    res.json({
        uname: 'jack',
        uage: 12,
        gender: 'female'
    })

})