网络模块封装

时间 2019-12-01

标签网络模块封装栏目系统网络繁體版

原文原文链接

网络模块封装

1、选择什么网络模块

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

为何不用它呢？
- 很是好解释，配置和调用方式很是混乱。
- 编码起来看起来就很是蛋疼。
- 因此真是开发中不多直接使用，而是使用 jQuery—Ajax

选择二：JQuery-Ajax

相对于传统的 Ajax 很是好用
为何不用？
- 首先，咱们先明确一点：在 Vue 的整个开发中都是不须要使用 jQuery了。
- 那么，就意味着为了方便咱们进行一个网络请求，特地应用一个jQuery，就不合理了。
- jQuery 的代码 1w+ 行。
- Vue的代码才 1w+ 行。
- 彻底不必为了用网络请求就应用这个重量级的框架。

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

优势
- Vue-resource 的体积相对于 jQuery 小不少
- 另外 Vue-resource是官方推出来的。
为何不用？
- 在 Vue2.0 推出后, Vue 做者就在 GitHub 的 Issues 中说明了去掉 vue-resource，而且之后也不会再更新。
- 对之后的项目开发和维护都存在很大的隐患

选择四：在说明不在继续更新和维护 vue-resource 的同时，做者还推荐了一个框架： axios

为何用它？
- axios 有很是多的优势，而且用起来也很是的方便。

2、jsonp

在前端开发中，咱们一种常见的网络请求方式就是 JSONPjavascript
使用 JSONP 最主要的缘由是为了解决跨域访问的问题。前端
JSONP 的原理是什么呢？vue
- JSONP 的核心在于经过 script 标签的 src 来帮助咱们请求数据。
- 缘由是咱们的项目部署在domain1.com 服务器上时，是不能直接访问 domain2.com 服务器上的资料的。
- 这个时候，咱们利用 script 标签的src 来帮助咱们去服务器请求到数据，将数据当作一个 JavaScript的函数䣂执行，而且执行的过程当中传入咱们须要的 json。
- 全部，封装 jsonp 的核心就在于咱们监听 window上的 jsonp 进行回调的名称。

JSONP 如何封装呢？java

咱们一块儿本身来封装一个出来 JSONP的代码吧。node

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, roject) => {
        try {
            window[callback] = function (result) {
                body.removeChild(script);
                resolve(result)
            }
            const params = handleParam(option.data);
            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)}` 
    }
    return url
}

3、为何选择 axios

一、功能特色：

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

二、补充： axios 名称的由来、我的理解

axios ： Ajax i/o systemjquery

三、axios 请求方式

支持多种请求方式ios
- axios(config)
- axios.request(config)
- axios.get（url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])

如何发送请求呢？ajax

案例：发送 get 请求json

import axios from 'axios'

export default {
    name: 'app',
    created() {
        // 提问： 为何没有跨域问题
        // 1. 没有请求参数
        axios.get("http://www.liulongbin.top:3005/api/getlunbo")
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

        // 2. 有请求参数
        axios.get('http://123.207.32.32:8000/home/data', {params: { type: 'sell', page: 1}})
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
}

发送并发请求axios

有时候，咱们能够须要同时发送两个请求

使用 axios.all , 能够放入多个请求的数组，

axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

// 2. axios 发送并发请求
axios
  .all([
    axios({
      url: "http://www.liulongbin.top:3005/api/getlunbo"
    }),
    axios({
      url: "http://123.207.32.32:8000/home/data",
      params: {
        type: "sell",
        page: 3
      }
    })
  ])
  .then(res => {
    axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    });
  });

全局配置

在上面的实例中，咱们的 BaseURL 是固定的

事实上，在并发中肯不少参数都是固定的

这个时候咱们能够进行一些抽取，也能够利用axios的全局配置

axios.defaults.baseURL = 'http://www.liulongbin.top:3005/api'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlenconded';

// 提取全局配置
axios.defaults.baseURL = "http://www.liulongbin.top:3005/api"

axios
  .all([
    axios({
      url: "/getlunbo"
    }),
    axios({
      // url: "http://123.207.32.32:8000/home/data",
      url: "/getnewslist",
    })
  ])
  .then(res => {
    axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    });
  });

四、常见的配置选项

请求地址
- url: '/user',
请求类型
- method: 'get',
请求根路径
- baseURL: 'http://www.mt.com/api'
请求前的数据处理
- transformRequest: [function(data) {}],
自定义的请求头
- headers: {'x-Requested-With':'XMLHttpRequest'},
URL查询对象
- params:{id: 12},

五、axios 的实例

为何要建立 axios 的实例呢
- 当咱们从 axios 模块中导入对象时，使用的实例是默认的实例
- 当给该实例设置一些默认配置时，这些配置就被固定下来了。
- 可是后续开发中，某些配置可能会不太同样
- 好比某些请求须要使用特定的 baseURL 或者 timeout 或者 content-Type 等
- 这个时候，咱们就能够建立新的实例，而且传入属于该实例的配置信息
```
// 建立新的实例
const axiosInstance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000,
    headers: {}
})
```

```json
    // 发送网络请求
axiosInstance({
        url: '/category',
        method: 'get'
    }).then(res => {
        console.log(res)
    }).catch(err) => {
        console.log(err)
    }

六、axios 封装 (使用 Promise 进行封装)

import originAxios from 'axios'

export default function axios(option) {
    return new Promise((reslove, reject) => {
        // 1. 建立 axios 的实例
        const instance =originAxios.create({
            baseURL: 'api',
            timeout: 5000
        })
        
        // 2. 传入对象进行网络请求
        instance(option).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

七、如何使用拦截器

axios 提供了拦截器，用于咱们在发送每次请求或者获得响应后，进行对应的处理。

如何使用拦截

// 配置请求和响应拦截
instance.interceptors.request.use(config => {
    // 请求拦截成功
    console.log('来到了 request 拦截 success中')
    return config
}, err => {
    // 请求拦截失败
    console.log('request 拦截 failure 中')
})

instance.interceptors.response.use(response => {
    // 响应拦截成功
    console.log('来到了 response 拦截 success 中')
    return response.data
}, err => {
    // 响应拦截失败
    console.log('来到了 response 拦截 failure 中')
    return err
})

网络模块封装

网络模块封装

1、选择什么网络模块

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

选择二 ：JQuery-Ajax

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

选择四 ：在说明不在继续更新和维护 vue-resource 的同时，做者还推荐了一个框架： axios

2、jsonp

3、为何选择 axios

一、功能特色：

二、补充 ： axios 名称的由来、我的理解

三、axios 请求方式

四、常见的配置选项

五、axios 的实例

六、axios 封装 (使用 Promise 进行封装)

七、如何使用拦截器

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

选择二：JQuery-Ajax

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

选择四：在说明不在继续更新和维护 vue-resource 的同时，做者还推荐了一个框架： axios

二、补充： axios 名称的由来、我的理解