网络模块封装---axios

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

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
为什么不用它呢?
非常好解释,配置和调用方式等非常混乱.·编码起来看起来就非常蛋疼.

所以真实开发中很少直接使用,而是使用jQuery-Ajax

选择二: 在前面的学习中,我们经常会使用jQuery-Ajax>相对于传统的Ajax非常好用.
为什么不选择它呢?
首先,我们先明确一点:在Vue的整个开发中都是不需要
使用jQuery了.

那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?
jQuery的代码:w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用这个重量级的框架.

选择三: 官方在Vue1.x的时候,推出了Vue-resource.Vue-resource的体积相对于jQuery小很多.另外Vue-resource是官方推出的.
为什么不选择它呢?

在Vue2.0退出后,Vue作者就在GitHub的Issues中说明
了去掉vue-resource并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护.
对以后的项目开发和维护都存在很大的隐患.

选择四: 在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架: axios为什么不用它呢?
axios有非常多的优点并且用起来也非常方便.

稍后,我们对他详细学习.

为什么选择axios?

作者推荐和功能特点

功能特点:

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

axiox请求方式

• 支持多种请求方式:
  • axios(config)
  • axios.request(config)
  • axios.get(urI[L, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]I)
  • axios.patch(url[, data[, config]])

axios({
url:"https://123.2.0.0"
}).then(res =>{
	console.log(res)
})

axios 默认是 get 请求，可以传入 请求方式，如下：

axios({
url:"https://123.2.0.0",
method:'get'
}).then(res =>{
	console.log(res)
})

axios({
url:"https://123.2.0.0",
method:'get',
// 专门针对 get 请求的参数拼接
params:{
type:'pop',
page:1
}
}).then(res =>{
	console.log(res)
})

有时候,我们可能需求同时发送两个请求:

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

发送 axios 多个请求，即并发请求：

axios.all([
	axios(
		url:'https://123.2.0.0'
	),
	axios(
		url:'https://123.2.0.0')
		params:{
			type:'pop',
			page:5
		}
]).then(res =>{
		console.log(res)
	})

全局配置

在上面的示例中,我们的BaseURL是固定的事实上,

• 在开发中可能很多参数都是固定的.
• 这个时候我们可以进行一些抽取,也可以利用axiox的全局配置

axios.defaults.baseURL = 'http://123.27.32.32:800'
axios.defaults.headers.post['content-Type*] 
='application/x-www-form-ur1encoded';

常见的配置选项

• 请求地址 url: "/user’,
• 请求类型 method: ‘get’,
• 请根路径baseURL: "http://www.mt.com/api’,
• 请求前的数据处理t: ransformRequest:[function(data)0],
• 请求后的数据处理t ransformResponse: [function(data)O].
• 自定义的请求头 headersg’x-Requested-With":"XMLHttpRequest’],
• URL查询 对象 params:{ id: 12 },
• 查询对象序列化函数 paramsSerializer: function(params){ }
• request body
  data: { key: 'aa},
• 超时设置s
  timeout: 1000,跨域是否带Token
• withCredentials: false,
• 自定义请求处理
  adapter: function(resolve, reject, config)().
• 身份验证信息
  auth: f uname: ", pwd: '123,
• 响应的数据格式 json / blob /document /arraybuffer / text/ stream
  responseType: ‘json’,

当不同的页面需要请求不同的域名端口对应的接口数据时的做法：

创建对应的axios 的实例

const instance1 = axios.create({
	baseURL:'http://123.27.32.32:800',
	timeout: 5000
})

instance1({
	url:'/home/multidata'
}).then(res =>{
   console.log(res)
})

const instance2 = axios.create({
	baseURL:'http://123.27.32.30:800',
	timeout:8000
})

instance2({
url:'/user'
}).then(res =>{
   console.log(res)
})

为什么要创建axios的实例呢?

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

axios 拦截器的使用

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。如何使用拦截器呢?
//配置请求和响应拦截
instance.interceptors.request.use(config =>{console.log(‘来到了request拦截success中’);return config
}, err ->{
console.log('来到了request拦截failure中 ');return err
instance.interceptors.response.use(response => {console.log(‘来到了response拦截success中’);
return response.data
}, err =>{
console.log(‘来到了response拦截failure中’);return err