Vue3 Ajax

Posted on  by admin
Asynchronous Javascript and XML (AJAX), is a way of communicating to a web server from a client-side application through the HTTP or HTTPS protocol.

Even though AJAX holds XML in the name, the way data is sent through requests or received doesn't have to be XML, but also plain text, or in most cases JSON, due to it being lighter and a part of JavaScript in and of itself.

Vue.js is used as a front-end framework, and if you ever want to communicate with a server, to retrieve or store information to a database or perform some calculations on your data you will most likely need AJAX.

Execute multiple concurrent requests

Even though AJAX can be used by creating an XMLHttpRequest object, which will be available through the browser.

Axios is an HTTP client and it can be installed into our package.json dependencies via your package manager of choice, be it NPM or Yarn:. After the installation, we can set up a minimalistic test component for demonstration purposes:.

Requests to a server over HTTP take a certain amount of time to return with a response, and, to make sure the information shown to the user is correct, promises will have to be used to make sure the data has returned before continuing with our code execution.

POST example

To use it in a component, we simply import the package and assign it to a variable:.

Generally, API calls are performed inside the mounted Vue lifecycle hook.

Therefore, the usage of promises will make sure we can handle the data and add it to our view. The then() function, lets us manipulate our promise and tell our code what we are going to do if/when the request was successful. We can, for example, with a callback function, check our response in the console:.

A response has been returned, and we can see it inside the browser's console, but, how do we show the user the todos list?

GET 实例

We should hold the todos list inside the data object for future referencing inside the DOM.

vue-resource 提供了 7 种请求 API(REST 风格):

除了 jsonp 以外,另外 6 种的 API 名称是标准的 HTTP 方法。

options 参数说明:

参数类型描述
urlstring请求的目标URL
bodyObject, FormData, string作为请求体发送的数据
headersObject作为请求头部发送的头部对象
paramsObject作为URL参数的参数对象
methodstringHTTP方法 (例如GET,POST,...)
timeoutnumber请求超时(单位:毫秒) (0表示永不超时)
beforefunction(request)在请求发送之前修改请求的回调函数
progressfunction(event)用于处理上传进度的回调函数 ProgressEvent
credentialsboolean是否需要出示用于跨站点请求的凭据
emulateHTTPboolean是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT,PATCH和DELETE请求。
emulateJSONboolean设置请求体的类型为application/x-www-form-urlencoded

通过如下属性和方法处理一个请求获取到的响应对象:

属性类型描述
urlstring响应的 URL 源
bodyObject, Blob, string响应体数据
headersHeader请求头部对象
okboolean当 HTTP 响应码为 200 到 299 之间的数值时该值为 true
statusnumberHTTP 响应码
statusTextstringHTTP 响应状态
方法类型描述
text()约定值以字符串方式返回响应体
json()约定值以格式化后的 json 对象方式返回响应体
blob()约定值以二进制 Blob 对象方式返回响应体
We will call it todosList, and we will copy the data property of the response object in an immutable way (so that we do not change the actual response object) by using the Javascript spread operator and just show the first 10 elements, using the slice array function, so that we do not load hundreds of todos:.
  1. #0

    What happens if the request fails?