无法从sveltekit骨架项目中的endpoint t.js访问quest.body [英] Unable to access request.body from the endpoint.js in sveltekit skeleton project

查看:9
本文介绍了无法从sveltekit骨架项目中的endpoint t.js访问quest.body的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

从sveltekit应用程序启动骨架项目后。我的索引有一种形式:

<script>
    let name
    let password

    async function submitit(){
       // console.log("name is :", name)
       // console.log("password is :", password)
       
     const doit = async () =>{
        let res = await fetch( 'formdata' ,{
        method : "post",
        headers: {        
        'Accept': 'application/json',
        'content-type' : 'text/html; charset=UTF-8',
        //'Content-Type': 'multipart/form-data'
        },
        body : JSON.stringify({
            name : "name",
            password : "password"
        })        
    })// fetch
    let results =await res.json()
    console.log( "xxxxxxxxxxxxxxxxxxxxx"    , results )
    return results
    }       

     doit().then(data =>{
         console.log("data log : " , data)
     })


    } //submitit


</script>









<form on:submit|preventDefault={submitit}>
    <p>
    <label>Name :
        <input type="text"  placeholder="name"   aria-label="name" required bind:value={name}>
    </label>
</p>
<p>
    <label>Password :
        <input type="password" placeholder="password"   aria-label="password" required  bind:value={password}>
    </label>
</p>
    <button type="submit">Submit</button>
</form>

我的终结点formdata.js

export async function post(request) {    

    console.log("formdata js log of request : ", request)
    
    return {
        
        status : 200,
        headers: {        
            'content-type': 'application/json'
        },
        body : {            
            message : "login form submitted the login credentials",
        }
    }

} 

当我单击提交时,index.svelte返回提交了登录凭据的登录表单消息,该消息位于浏览器的console.log中。用于使用NPM run dev运行应用程序的cmd记录dataform.js请求并打印以下内容:

formdata js log of request :  {
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: <Buffer 7b 22 6e 61 6d 65 22 3a 22 6e 61 6d 65 22 2c 22 70 61 73 73 77 6f 72 64 22 3a 22 70 61 73 73 77 6f 72 64 22 7d>,
      stream: [Readable],
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'POST',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://127.0.0.1:3000/formdata',
    origin: 'http://127.0.0.1:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: '127.0.0.1:3000',
    hostname: '127.0.0.1',
    port: '3000',
    pathname: '/formdata',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: {},
  locals: {},
  platform: undefined
}
请注意以下事项: 1-我的表单中没有用户名或密码字段,index.svelte中的Body json.stringify中也没有用户名或密码字段,但它位于请求日志的url部分下(尽管我在index.svelte中输入了虚拟文本,但两者都是空的)

2-体流是可读的。我指示应用程序接受/发送json。

我也从Rich那里找到了这份公关,我不知道我面临的是不是因为这个变化。Here is the PR

我被这件轻薄的衣服弄糊涂了。我对Sapper有很好的体验,我希望我能弄清楚sveltekit,这样我就可以继续开发我的应用程序,但这是任何应用程序处理表单数据的第一步。

=================================================================

更新:如有可能需要解释* 我仍然想了解您是如何从这篇公关中获得事件参数的,因为在Rich的文章中,带+的代码是更新后的代码。未提及事件:

更新终结点 类似地,处理程序接收RequestEvent。大多数GET处理程序将保持不变,但需要读取请求正文的任何处理程序都需要更新:

-export async function post({ params, body }) {
+export async function post({ params, request }) {
+ const body = await request.formData(); // or request.json(), etc
  await do_something_with(params, body);
  return { status: 201 };
}

事件中任何地方都没有提及。您是如何获取关键字&事件&作为函数的参数的?

推荐答案

您的终结点现在应该如下所示:

export async function post(event) {
    const data = await event.request.json();
    console.log('formdata js log of request : ', data);

    // ... the rest is the same as before
}

在您引用的PR中链接的更改之前,post的参数被称为request,您可以访问request.body。现在,该参数称为event,您可以访问event.request,这是一个标准的web request对象。请参阅SvelteKit docs

您的终结点也可以这样编写,以自动分解请求属性(请注意请求周围的附加花括号):

export async function post({ request }) {
    const data = await request.json();
    console.log('formdata js log of request : ', data);

    // ... the rest is the same as before
}

这篇关于无法从sveltekit骨架项目中的endpoint t.js访问quest.body的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆