网络模块封装
一、选择什么网络模块
选择一 ：传统的 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 有非常多的优点 ，并且用起来也非常的方便。
二、jsonp
-
在前端开发中，我们一种常见的网络请求方式就是 JSONP
-
使用
JSONP最主要的原因是为了解决跨域访问的问题。 -
JSONP 的原理是什么呢？
- JSONP 的核心在于通过 script 标签的 src 来帮助我们请求数据。
- 原因是我们的项目部署在domain1.com 服务器上时，是不能直接访问 domain2.com 服务器上的资料的。
- 这个时候，我们利用 script 标签的src 来帮助我们去服务器 请求 到数据，将数据当做一个 JavaScript的函数䣂执行，并且执行的过程中传入我们需要的 json。
- 所有，封装 jsonp 的核心就在于我们 监听 window上的 jsonp 进行回调的名称。
-
JSONP 如何封装呢？
-
我们一起自己来封装一个出来 JSONP的代码吧。
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 }
-
三、为什么选择 axios
1、功能特点：
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http 请求
- 支持 Promise API
- 拦截请求和 响应
- 转换 请求 和 响应数据
- 等等
2、补充 ： axios 名称的由来、个人理解
axios ： Ajax i/o system
3、axios 请求方式
-
支持多种请求方式
- 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]])
-
如何发送请求呢？
-
案例：发送 get 请求
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.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); }); });
-
-
4、常见的配置选项
-
请求地址
- url: '/user',
-
请求类型
- method: 'get',
-
请求根路径
- baseURL: 'http://www.mt.com/api'
-
请求前的数据处理
- transformRequest: [function(data) {}],
-
自定义的请求头
- headers: {'x-Requested-With':'XMLHttpRequest'},
-
URL查询对象
- params:{id: 12},
5、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)
}
6、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)
})
})
}
7、如何使用拦截器
-
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 })