axios的基本使用

网络模块封装axios

几种网络模块

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

为什么不用：

• 配置和调用方式等混乱
• 编码复杂
• 真实开发很少用

选择二：JQuery-ajax

相对于传统Ajax非常好用

为什么不用：

• vue的整个开发中不需要JQuery
• 为了网络请求特意引用jQuery不方便
• vue的代码比jQuery的代码少

选择三：Vue1.x中推出了Vue-resource

体积小，是官方退出的

为什么不用：

• 在vue2.0以后不在更新维护
• 对以后的项目开发和维护有很大隐患

选择四：axios

使用方便，有非常多优势，在后续中会详细说明

选择五：jsonp

使用这个的主要原因往往是为了解决跨域访问的问题。

jsonp的核心在于通过<script>标签的src来帮助我们请求数据，将数据当做JavaScript的函数来执行，并且执行过程中传入我们需要的json，封装jsonp的核心在于我们监听window上的jsonp进行回调时的名称

为什么选择axios

ajax i/o system

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

一、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]])

1.1 安装axios

npm install axios --save

安装后可以在项目任意位置使用axios

1.2 最最简单的使用过程

import axios from 'axios'
axios({
	url:'http://httpbin.org/get',
	method:'get'//请求方式
}).then(data =>{
	console.log(data)
})

使用params可以拼接url

params:{
		type:'pop',
		page:1
	}

1.4 axios.all发送多个并行请求，两个请求都有结果后再执行之后的程序

axios.all([axios({
	url:'http://httpbin.org/get'
}),axios({
	url:'http://httpbin.org/get'
})]).then(data=>{
	console.log(data)
})

将两个结果进行分割,在then函数中使用axios.spread

.then(axios.spread((data1,data2))=>{
	console.log(data1)
	console.log(data2)
})

二、axios的配置信息相关

全局配置

axios.default.timeout=5

设置超时时间，这里的时间是毫秒

一些常用配置选项

• url:'/user'
• method:'get'
• 请求的根路径：baseURL:'127.0.0.1:8080'
• 请求前的数据处理：transfromRequest:[function(adta){}]
• 请求后的数据处理：transformRespond:[function(data){}]
• 自定义的请求头部：headers:{'x-Requested-With':'XMLHttpRequest'}
• URL查询对象：params:{id:12}get请求会把params中的数据以？的形式拼接在后面
• 相应的数据格式 json/blob/document/arraybuffer/text/steam：responseType:'json'

三、axios实例

每一个实例有自己的配置，不用使用全局的设定

const instance=axios.create()
instance({
	timeout:5000,
	baseURL:'...'
})
instance({
	url:'...',
}).then((res)=>{
	console.log(res)
})

每一个实例可以自己发送自己的请求处理数据

四、网络请求封装

一般方案

创建一个network目录，在目录下创建request.js文件，所有的网络请求通过这个文件

文件中配置请求的参数和回调函数success和failure

import axios from 'axios'

export function request(config,success,failure){
	//创建axios的实例
	const instance =axios.create({
		timeout:5000
	})
	instance(config)
	.then(res=>{
		console.log(res)
		success(res)
	})
	.catch(res=>{
		console.log(res)
		failure(res)
	})
}

在需要发送请求的部分导入request

import {request} from '../network/request.js'

网络请求：

request({
	url:'http://httpbin.org/get'
},res=>{
	console.log(res)
},err=>{
	console.log(err)
})

终极方案：return Promise

在request.js文件中：

import axios from 'axios'

export function request(config){
	//创建axios的实例
	return new Promise((resolve,reject)=>{
		const instance =axios.create({
			timeout:5000
		})
		instance(config)
		.then(res=>{
			// console.log(res)
			resolve(res)
		})
		.catch(res=>{
			// console.log(res)
			reject(res)
		})
	})
	
	
}

返回一个Promise对象，因此还可以简化：

import axios from 'axios'

export function request(config,success,failure){
	//创建axios的实例
		const instance =axios.create({
			timeout:5000
		})
		return instance(config)
}

这个instance是axios的实例，所以instance自己就是一个promise的对象，直接返回这个Promise对象就可以了

使用时：

request({
	url:'http://httpbin.org/get'
}).then(res=>{
	console.log(res)
}).catch(res=>{
	console.log(res)
})

五、axios的拦截器

用于我们每次请求或者得到响应后们进行对应的处理

5.1请求拦截

	instance.interceptors.request.use(res=>{
			//发送成功，把配置拦截下来
			console.log(res)
			//把配置信息还回去
			return res
		},err=>{
			//没有发送出去，比如网络有问题的时候
			console.log(err)
		})

一般用在请求时要配置或者转化一些东西；还可以在每次发送请求时在界面显示一个请求的图标或者动画；还有一些网络请求（比如有些请求必须登录），必须携带一些特殊的信息

5.3响应拦截

instance.interceptors.response.use(res=>{
			//去除一些没有用的数据，只返回我们要的data
			return res.data
		},err=>{
			console.log(err)
		})