Vue进行网络请求时该选择什么网络模块？Vue对axios进行封装实例

1. Vue选择什么网络模块？

Vue中发送网络请求有非常多的方式，那么，在开发中，如何选择呢？

• 选择一：传统的Ajax是基于XMLHttpRequest(XHR)

• 为什么不用它呢？

• 非常好解释，配置和调用方式等非常混乱。

• 编码起来看着就非常不舒服。

• 所以在真实开发中很少直接使用，而是使用JQuery-Ajax。

• 选择二：JQuery-Ajax相对于传统的ajax是非常好用的。

• 为什么不用它呢？

• 首先，我们需明确一点：在Vue的整个开发过程中都是不需要使用JQuery的。

• 那么，就意味着为了方便我们进行一个网络请求，特意引用了一个JQuery，这样觉得合理吗？

• JQuery有一万加行源码，Vue也就才一万加行。

• 完全没有必要为了使用网络请求就引用这个重量级的框架。

• 选择三：官方在Vue1.x的时候，推出了Vue-resource。

• Vue-resource的体积相对于JQuery小得多。

• 更何况这是Vue官方推荐的。

• 但是，还是不选择它。

• 在Vue2.0后，Vue开发作者就在GitHub的Issues中说明去掉Vue-resource，并且以后不再更新和维护。

• 选择四：jsonp

• 在前端请求中，我们一种常见的网络请求就是JSONP

• 使用JSONP最主要的原因就是为了解决跨域访问的问题。

• JSONP的原理是什么？

• 核心在于通过script标签的src属性来帮助我们请求数据。

• 原因就是我们的项目部署在domain1.com服务器上时，是不能直接访问domain2.com服务器上的资料的。

• 这个时候，我们利用script标签的src帮助我么请求数据，将数据当作一个javascript的函数执行，并且执行的过程中传入我们需要的json.

• 所以，封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称。

• 选择五：axios(推荐)

• 这是Vue推荐的框架，axios有非常多的优点，使用起来非常方便。

• axios的功能特性：

• 在浏览器中发送XMLHttpRequest请求，

• 在node.js中发送http请求，

• 支持Promise API

• 拦截请求和响应

• 转换请求和响应数据。

2.Vue中安装axios

在项目终端输入命令：

npm install axios --save

3.在Vue中进行axios封装

为什么要对axios进行封装：

• 当我们没有进行封装，而是直接使用的话，
• 那就需在每个组件都弄一个axios实例来发起网络请求，这不仅造成重复的代码量过大
• 那么假如有一天axios不被维护了或者公司要求你更换其它网络请求模块，
• 这样的话，万一你有100+组件，那你就需一个个的去更改，如果真的是这样，我想你会崩溃掉。
• 进行网络封装之后，你只需更改封装的模块即可。
• 这是非常有利于后期的维护的

下面就对axios进行简单封装：

在Vue项目的src文件夹创建一个network文件，专门处理网络请求。

在该文件下创建require.js文件：

import axios from "axios";
export function request(config) {
     
  //这里只负责发起网络请求，而响应得结果交回调用处处理
  return new Promise((resolve, reject) => {
     
    //1.创建axios实例
    const instance = axios.create({
     
      baseURL: "xxx.com:8080",
      timeout: 3000
    });
    //2.发起请求
    instance(config)
      .then(
        //得到响应得结果得传回调用处，让它私自处理
        response => {
     
          resolve(response);
        }
      )
      .catch(error => {
     
        //请求发生异常，返回调用处处理
        reject(error);
      });
  });
}

这样就简单封装好了，如果想要使用就到组件导入：
在App.vue中使用网络请求：

<template>
  <div id="app">
    <button @click="getData">button>
  div>
template>

<script>
import require from "./network/require";
export default {
      
  name: "App",
  methods: {
      
    getData: function() {
      
      require({
      
        method: "get",
        url: "xxx.com"
      })
        .then(res => {
      
          //正常的响应,对数据处理，进行展示
          console.log(res);
        })
        .catch(error => {
      
          //请求发生错误，做错误处理
          console.log(error);
        });
    }
  }
};
script>

<style>style>

在组件中并没有引入axios，因此，即使更换其它网络请求模块，可以直接去require.js中进行更改，而不用每个组件更改。