What are $.ajax, axios and fetch? Detailed explanation of how to use fetch

This article will introduce to you what $.ajax, axios, and fetch are respectively, so that you can learn more about how to use fetch. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

• What is Ajax?

Answer: Ajax is a technology that can use asynchronous data transfer (HTTP request) between the browser and the server. Use this to allow a page to request a small amount of data without having to refresh the entire page. For traditional pages (not using Ajax) to refresh part of the content, the entire web page must be reloaded.

• Ajax Based on what?

Answer: It is based on XMLHttpRequest (XHR). This is a relatively rough API that does not comply with the design principle of separation of concerns (Separation of Concerns), and is not so friendly to configure and use. The background of

• $.ajax?

Answer: Based on the above reasons, various ajax libraries are referenced, but the most famous one is $.ajax() in the jQuery API. $.ajax() One of its advantages is asynchronous operation, but jQuery’s asynchronous operation is an event-based asynchronous model, which is not as friendly as promise.

• #fetch Generated background?

Answer: Based on the various factors mentioned above, the fetch API came into being. But it is easy to use, and it has some problems (this problem will be discussed in detail below, and the corresponding solutions will be explained), coupled with compatibility issues (IE does not support it at all), so many developers use axios. Three-party library.

• Library that supports promise (axios)?

Answer: axios This library is now a relatively common industry solution. axios One reason for its popularity is promise. Another reason is promise. One reason is the popularity of libraries based on data operations (vue.js, angular.js, react.js, etc.), while traditional jQuery is a library based on DOM operations. But it also has flaws, that is, before we use it, we must ensure that the library has been introduced.

Actually, personally, I still prefer to use fetch. If you encounter compatibility issues during development, you only need isomorphic fetch without introducing an additional library. Let’s focus on fetch.

Usage of fetch

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

url: access address
options: common configuration parameters
response: request return object

Request parameter configurationoptions For details, please refer to MDN fetch

Fetch problems and solutions

1. You need two steps to get the data

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

Through the above code, you can find that the Response object returned by direct printing has no data at all. To obtain the required data, you must go through an intermediate methodresponse.text() (fetch provides 5 methods)

On the other hand, axios is much more convenient to use, and the Response object it returns has data. Within the data attribute. The reference code is as follows:

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

Of course, this is not a big problem, but it is a little troublesome to use.

1. The fetch request defaults to no cookie

To solve this problem, you need to options Medium configuration{credentials: 'include'}

1. Not all request errors willreject

That is to say, the catch method cannot catch all errors. When the error can be expressed in the form of a status code (such as: 404, 500, etc.), fetch returns Promise will not have a reject, and catch will only be effective when the network fails or the request is blocked.

To solve this problem, we can determine whether the ok in the Response object is true. If not, use Promise to manually add a reject That’s it. The reference code is as follows:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

If you do not add reject manually, undefined will be printed, which is not what we want. Of course, use axios There is no need to consider this issue, the code is as follows:

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

fetch optimization

Since the res.text() method returns a promise, so .then can be called directly; in addition, in order to ensure that all errors return a unified format (all return a Promise), the above code can be optimized as follows:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Students who have played express/koa, or have a certain understanding of the backend, know that the server will also return some prompt information in some cases, so how should it be handled? Common error prompts include a status code (status) and prompt message (msg). The code is modified as follows:

server:

res.status(404).send({
    err: 'not found'
})

client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

兼容解决方案

以上问题解决并优化fetch的使用后，发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理：

首先，要引入 es5-shim 解决fetch这个新特性的同构；

其次，要引入 es6-promise 解决promise的兼容问题；

然后，引入 fetch-ie8 解决fech的同构问题；

最后，引入 fetch-jsonp 解决跨域问题。

当然，你也不需要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不需要一步步的是实现。只需要两步：

1. 安装 fetch package

   npm install whatwg-fetch --save

2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其他的使用和 fetch 则这个原生的API雷同。

哪些情况可以放弃使用fetch

1. 获取Promsie的状态，如：isRejected, isResolved

2. 如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue

The above is the detailed content of What are $.ajax, axios and fetch? Detailed explanation of how to use fetch. For more information, please follow other related articles on the PHP Chinese website!