vue学习之网络封装

1、常见的网络请求模块，优缺点对比

1.1、传统的Ajax基于XMLHttpRequest

为什么不采用？

1. 配置和调用非常混乱
2. 编码看起来麻烦
3. 真实开发很少使用，而是使用jquer-ajax

1.2、jquery-Ajax

为什么不采用？

1. 首先明确，vue整个开发过程不需要jquery。
2. jquery代码量 1w +++行
3. vue代码量才 1w +++行

1.3、Vue-resource

为什么不采用？

1. vue作者在github已经说明2016年以后再也不会更新
2. 以后不再有新的版本，不会继续更新和维护
3. 对以后的项目开发和维护存在很大隐患。

1.4、axios
强烈推荐使用

2、jsonp原理和封装

2.1、使用原因

解决跨域访问问题

2.2、原理

样图预览

简要说明

    jsonp核心在于通过<script>标签的src来帮助我们请求数据，原因在于我们项目部署在domain1.com服务器上，
是不能访问doman2.com服务器的资料的；这个时候利用<script>标签的src帮助我们去服务器请求到数据，将
数据当做一个javascript的函数来执行，并且执行过程中传入我们需要的json;故而jsonp核心就在于监听
window上的jsonp进行回调的名称。

2.3、封装

import { reject, resolve } from "core-js/fn/promise";

let count = 1;
export default function originPJSONP(option) {
    // 1、从传入的option获取url
    const url = option.url;

    // 2、在body中添加script标签
    const body = document.getElementsByTagName('body')[0];
    const script = document.createElement('script');

    // 3、内部产生一个不重复的callback
    const callback = 'jsonp' + (count++);

    // 4、监听window上的jsonp调用
    return new Promise((resolve,reject) => {
        try{
            window[callback] = function (result) {
                body.removeChild(script);
                resolve(result)
            }
            const params = handleParam(option.data);
            script.src = url + '?callback' + callback + params;
            body.appendChild(script)
        }catch(e){
            body.removeChild(script)
            reject(e)
        }
    })
}

function handleParam(data){
    let url = ''
    for(let key in data){
        let value = data[key] !== undefined ? data[key] :''
        url+= `&${key}=${encodeURIComponent(value)}`
    }
}

3、axios内容详细讲解

3.1、功能特点

• 浏览器发送XMLHttpRequests请求
• node.js发送http请求
• 支持Promise API
• 拦截请求和相应
• 转换请求和相应数据

3.2、请求方式

3.3、发送get请求演示

1、全局安装axios

npm install axios --save

2、默认加载调用接口测试

App.vue 页面引入axios

<template>
  <div id="app">
    {{ messages }}
    <HelloVuex />
    <mutations-vuex />
    <h1>App.vue页面显示getters</h1>
    <h1>年龄大于19的多少人</h1>
    <h2>{{ this.$store.getters.overAgeTwentyLength }}</h2>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex.vue";
import MutationsVuex from "./components/MutationsVuex.vue";
import axios from "axios";

export default {
  name: "App",
  components: {
    HelloVuex,
    MutationsVuex,
  },
  data() {
    return {
      messages: "消息",
    };
  },
  created() {
    //
    axios
      .get("http://123.207.32.32:8000/home/multidata")
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style>
</style>

效果图简单说明

3、模拟调用成功

3.4、发送并发请求

使用axios.all,可以放入多个请求数组
axios.all([])返回结果是一个数组，使用axios.apread可以将数组[res1,res2]展开为res1,res2

 axios.all([
        axios.get('http://123.207.32.32:8000/category'),
        axios.get('http://123.207.32.32:8000/home/data',{params:{type:'sell',page:2}})
    ]).then(axios.spread((r1,r2) => {
      console.log(r1);
      console.log(r2);
    }))

效果图显示

3.5、全局配置

现在在App.vue文件添加这两行代码

接口地址发生变化，不需要前面地址，也能活得结果

4、axios的实例

4.1、创建实例

为什么要创建实例

• 当我们从axios模块中导入对象时候，使用的实例是默认的
• 当给实例设置一些默认设置时候，这些配置就被固定下来了
• 不利于后续开发
• 比如某些请求需要特定的baseURl或者timeout,content-type
• 这个时候我们可以创建新的实例，并且传入属于该实例的配置信息

案例演示
1、效果图

2、关键源码实现

App.vue

<template>
  <div id="app">
    {{ result }}
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  components: {},
  data() {
    return {
      result: [],
    };
  },
  created() {
    // 创建新的实例
    const axiosInstance = axios.create({
      baseURL: "http://123.207.32.32:8000",
      timeout: 5000,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
    axiosInstance({
      url: "/category",
      method: "get",
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style>
</style>

4.2、axios封装

1、封装axios request.js

代码样图

代码实现

import originAxios from 'axios'

export default function axios(option) {
    return new Promise((resolve, reject) => {
        // 1、创建axios实例
        const instance = originAxios.create({
            baseURL: "http://123.207.32.32:8000",
            timeout: 5000,
            headers: ''
        });

        // 2、传入对象进行网络请求
        instance(option).then(res => {
            resolve(res)
        }).catch(error => {
            reject(error)
        })
    })
}

在相应的页面使用 App.vue

<template>
  <div id="app">
    {{ result }}
  </div>
</template>

<script>
import request from "./network/request";
export default {
  name: "App",
  components: {},
  data() {
    return {
      result: [],
    };
  },
  created() {
    request({
      url: "/category",
      method: "get",
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style>
</style>

4.3、如何使用拦截器

1、效果演示

2、代码实现
request.js

import axios from 'axios';

export default function request(config) {
    // 1、创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });

    // 2、axios拦截器
    // 2.1、请求拦截器
    instance.interceptors.request.use(config => {
        // 1、比如config中一些信息不符合服务器要求
        // 2、每次发送网络请求，希望界面显示一个请求的图标
        // 3、某些网络请求  登录，需要携带token

        console.log('来到了request拦截success中')
        return config;
    }, error => {
        console.log('来到了request拦截failure中')
        return error
    })

    // 2.2、响应拦截器
    instance.interceptors.response.use(res => {
        console.log('来到了response拦截success中')
        return res.data;

    }, error => {
        console.log('来到了response拦截failure')
        return error
    })

    // 3、发送真正的网络请求
    return instance(config);
}

App.vue 使用

<template>
  <div id="app">
    {{ result }}
  </div>
</template>

<script>
import request from "./network/request.js";
export default {
  name: "App",
  components: {},
  data() {
    return {
      result: [],
    };
  },
  created() {
    request({
      url: "/category",
      method: "get",
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style>
</style>

3、请求拦截和响应拦截做了哪些事情

请求拦截

响应拦截

1、数据的过滤
2、状态码判定