---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

---

网络模块

网络请求方式选择

1. 传统的Ajax

基于XMLHttpRequest(XHR)

• 不用的原因
  配置和调用方式混乱
  编码不好看，真实开发使用jQuery-Ajax

2. jQuery-Ajax

相当于传统的Ajax很好用

• 不用的原因
  Vue的开发不需要使用jQuery
  没必要为了网络请求来使用重量级框架

3. Vue-resource

体积相对于jQuery小很多，官方推出

• 不用的原因
  Vue不再更新维护新版本
  对项目开发和维护都存在很大的隐患

4. jsonp

解决跨域访问的问题

• 原理
  通过script标签的src来请求数据，将数据当中js函数执行，
  在执行过程在传入我们需要的json，核心就是监听windo上的jsonp进行回调的名称

选择axios

功能特点

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

支持多种请求发送

• 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]])

axios发送请求

基本使用

并发请求

• axios.all([axios({}), axios({}))
  then回调可以使用axios.spread((res1,res2)

全局配置

• axios.defaults.baseurl

插件配置选项

• url: 请求地址
• method: 请求类型，默认get
  params: 与get请求方式对应
  request body: 与post请求方式对应
  

创建axios实例

const a = axios.create({
	baseurl: 'url',
	timeout: 5000
	})

a({
	url: '/home/data',
	paramas: {
	type: 'pop',
	page: 1
	})
1
2
3
4
5
6
7
8
9
10
11

nginx进行服务器反向代理

模块封装

1. 创建回调函数
2. 作为对象属性
3. 使用promise
4. return 对象

因为axios实例本身就是promise

axios拦截器

请求拦截

axios.interceptors.request.use(config =>{},err=>{})
1

应用场景

1. config中的信息不符合浏览器要求
2. 每次发送网络请求，界面都要显示一个请求的图标
3. 登录(token验证)信息确认

响应拦截

axios.interceptors.response.use(res => {},err => {})
1

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》