Shulou(Shulou.com)06/01 Report--

This article mainly introduces the vue network request solution native network request and js network request library example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

Native network request 1. XMLHttpRequest (W3C standard)

/ / products without promise

At that time, everything was called back, and it was too troublesome.

2. Fetch

/ / the object provided by html5, based on promise because of the existence of promise, in order to simplify the network request.

Use Fetch-Web API API reference | MDN

Fetch is the new ajax solution Fetch returns a Promise object. Fetch is not a further encapsulation of ajax, but a native js that does not use a XMLHttpRequest object.

Parameters:

1. The first parameter is URL:

2. The second parameter for setting the request is optional.

3. Promise is used to process the result / callback

Fetch (url, options) .then (res= > res.json () / text ()) .then (ret= > console.log (ret))

Compatibility issues:

What if the lower version of ie is not compatible with Fetch? = "use third-party Fetch libraries [fetch-polyfill]

Use fetch for network request let url1 url2 after two addresses are executed at the same time before the related operation Promise.all

Let url1, whether it succeeds or not, I'm going to deal with Promise.finally.

Encapsulation-fetch network request

Encapsulation-- fetch web request _ tby_pr blog-CSDN blog

2. Js network request library axios

Returns json data as a promise type.

Documentation: instructions for Axios to see the cloud

Axios is a promise-based HTTP library that can be used in browsers and node.js.

Can intercept requests and responses and automatically convert JSON data. Axios is also a network request library recommended by vue authors.

/ / axios.get/post/put/deleteaxios.get (url,config) / / config can set header information axios.post (url,data,config) axios.put (url,data,config) axios.delete (url,data,config)

Or request through an instance

Through the instance request, add setting information (commonly used)!

Do not make a uniform setting through an instance (not commonly used), because it is set for everyone

/ / uniformly set axios.defaults.timeout = 10000axios.defaults.baseURL = 'http://localhost:3000'axios.defaults.headers.a =' admin' to axios

Post submission

/ / post submit axios.post (url, {id: 1, name: 'aaaa'}) .then (res = > console.log (res.data))

Or axios is written directly in # standard (not commonly used)

/ / axios is programmed directly with axios ({url, method:'get', data: {}}). Then (res = > console.log (res)) interceptor

(pipeline) (middleware)

1. Request interceptor (can be called multiple times) axios.interceptors.request.use (config = > {/ / uniformly set request domain address config.baseURL = 'http://localhost:3000' / / timeout config.timeout = 1000 / / set header information config.headers.token =' mytoken login' return config;}, err = > Promise.reject (err)) 2. Response interceptor (processing, filtering) axios.interceptors.response.use (response = > {return response.data}, err = > {/ / can be handled uniformly in the response interceptor, request exception alert ('request failed, please request again') return Promise.reject (err)}) The above is all the contents of the article "sample Analysis of vue Network request solution Native Network request and js Network request Library". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.