vue.js Inertia Plain Axios请求

kq4fsx7k  于 2022-12-19  发布在  Vue.js
关注(0)|答案(2)|浏览(195)

这是一个非常正常的要求,一个网页可能有多个API请求。我一直在inertiaidojs和这工作非常好,但它缺乏一个非常重要的功能,使普通的XHR请求。
然而Inertia.js提供了Inertia.reload(),但在某些情况下它不是很有用。
我正在寻找像Inertia::xhr()这样的东西,请记住,我仍然可以使用Inertia.js拦截器,如onStart,onFinish等。
任何人都可以帮助实现这一点吗?

0pizxfdo

0pizxfdo1#

您可以使用Axios(无论如何,它已经是一个依赖项)执行普通的XHR请求,或者使用原生Fetch api
来自文档:
使用Inertia提交表单在绝大多数情况下都很有效。但是,如果您需要对表单提交进行更细粒度的控制,那么您可以使用普通xhr或fetch请求。在同一个应用程序中使用这两种方法完全可以!
另请参见here

afdcj2ne

afdcj2ne2#

如果执行Interia::visists,将导致整个页面重新加载。
如果你想避免使用axios/fetch调用。例如,如果你只想添加一个注解功能,你可能不想重新加载整个页面。如果页面很慢,用户在添加注解时会感觉到延迟。
你唯一需要注意的是CSRF令牌,如果你使用axios,它会自动从cookie中读取XSRF-TOKEN。
如果您使用fetch API,您需要手动提供CRSF标记,这意味着您必须从shared data或cookie中读取它。
如果您将其添加到共享数据中,它将如下所示:

public function share(Request $request): array
{
    $isAdmin = Auth::user() instanceof Admin;
    return array_merge(parent::share($request), [
        'csrf' => csrf_token(),
        'session' => [
            'notification' => session('notification'),
        ],
        'auth' => self::share_auth(Auth::user()),
    ]);
}

您的获取请求将如下所示:

fetch(url, {
       method: 'POST', // *GET, POST, PUT, DELETE, etc.
       headers: {
           'Content-Type': 'application/json',
           'X-CSRF-TOKEN': usePage().props.value.csrf
           // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify({ name: name}) // body data type must match "Content-Type" header
    });

相关问题