Network module packaging

Network module encapsulation

Select what network module ：
vue There are many ways to send network requests in , that , In development , How to choose ? Choose one : Conventional Ajax Is based on XMLHttpRequestKXHR)
Why not use it ?
Very easy to explain , Configuration and calling methods are very confusing .
It's very painful to code .
So it's rarely used directly in real development , But use jQuery-Ajax

Choice two : In the previous study , We often use jQuery-Ajax
Compared with the traditional Ajax Very easy to use .
Why not choose it ?
First , Let's be clear : stay Vue It's not necessary in the whole development of
Use jQuery 了 .
that , It means that in order to facilitate us to make a network request , To quote a jQuery, Do you think it's reasonable ?
jQuery Code for 1w+ That's ok .
Vue Code for 1w+ That's ok .
There's no need to refer to this heavyweight framework for network requests .

Choose three : The official in the Vue1.x When , Launched Vue-resource.Vue-resource The volume of is relative to jQuery Many small .≥ in addition Vue-resource It's official .
Why not choose it ?
stay Vue2.0 after , Vue The author is in GitHub Of Issues Description in
Removed vue-resource, And it won't be updated in the future .
So it means later vue-reource When a new version is no longer supported , either
Will continue to update and maintain .
There are great hidden dangers in the future project development and maintenance .

Option 4 : In the statement no longer continue to update and maintain vue-resource At the same time , The author also recommends a framework : axios Why not use it ?
axios There are many advantages , And it's very convenient to use .> later , We studied him in detail .

jsonp
In front end development , One of our common network requests is JSONP, Use JSONP The main reason is often to solve the problem of cross domain access .

JSONP What is the principle of ?
JSONP At the heart of it is through <script> Labeled src To help us request data . The reason is that our project is deployed in domain1.com On the server , You can't directly access domain2.com Data on the server .
At this time, we use <script> Labeled src Help us go to the server to request data , Think of data as a javascript To perform , And in the process of execution, we pass in what we need json.
So package jsonp The core of this is that we monitor window Upper jsonp The name of the callback .

JSONP encapsulation
Let's encapsulate a process together JSONP The code of .

axiox Request mode

Support multiple request methods ：

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, configl])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

axiox Basic use of framework ：