Vue network request scheme native network request and js network request library

1. Native network request

1. XMLHttpRequest (w3c standard)

// The product when there is no promise

At that time, everything was called back, which was too troublesome.

2. Fetch

//Object provided by html5, based on promise. Because of the existence of promise, it is used to simplify network requests.

Using Fetch - Web API Reference | MDN

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

parameter:

1. The first parameter is the URL:

2. The second parameter of the setting request is an optional parameter

3. Return using Promise to handle results/callbacks

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

Compatibility issues:

What should I do if the lower version of IE is not compatible with Fetch? =》Use the third-party Fetch library [fetch-polyfill]

Use fetch to make a network request. Let url1 url2 execute both addresses at the same time before performing related operations. Promise.all

let url1 I have to handle Promise.finally regardless of whether it is executed successfully

fetch encapsulates network requests

2. js network request library

axios

Returns json data as promise type.

Documentation: Instructions · Axios Chinese Instructions · Kanyun

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 the network request library recommended by the Vue author.

// axios.get/post/put/delete
axios.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 via instance

Add setting information (common) through instance request!

Do not set it uniformly across instances (not commonly used) because it is set for everyone

// Set axios.defaults.timeout = 10000 for axios
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = 'admin'

postSubmit

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

Or axios directly uses # standard writing (not commonly used)

// axios directly uses axios({
  url,
  method:'get',
  data:{}
}).then(res => console.log(res))

Interceptor Aspect Programming

(Pipeline) (Middleware)

1. Request interceptor (can be called multiple times)

axios.interceptors.request.use(config => {
  // Unified setting of request domain name 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 => {
  // You can handle this uniformly in the response interceptor, request exception alert ('Request failed, please request again')
  return Promise.reject(err)
});

The above is the details of the native network request and js network request library of the network request solution. For more information about native network requests and js network request library, please pay attention to other related articles on 123WORDPRESS.COM!