Axios

Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

服务器端

使用json-server

1. axios基本使用

	// 1.GET
	axios({
	method: 'GET',
	url: 'http://localhost:3000/posts/2'
	}).then(res => {
	console.log(res);
	})
	// POST
	axios({
	method: 'POST',
	url: 'http://localhost:3000/posts',
	data: {
	title: 'test',
	author: 'lll'
	}
	}).then(res => {
	console.log(res);
	})
	// PUT
	axios({
	method: 'PUT',
	url: 'http://localhost:3000/posts/3',
	data: {
	title: 'test',
	author: 'new-lll'
	}
	}).then(res => {
	console.log(res);
	})
	// DELETE
	axios({
	method: 'DELETE',
	url: 'http://localhost:3000/posts/3',
	}).then(res => {
	console.log(res);
	})

2. 其他请求方法

	axios.request(config)
	axios.get(url[, config])
	axios.delete(url[, config])
	axios.head(url[, config])
	axios.options(url[, config])
	axios.post(url[, data[, config]])
	axios.put(url[, data[, config]])
	axios.patch(url[, data[, config]])
	// request
	axios.request({
	method: 'GET',
	url: 'http://localhost:3000/posts/2'
	}).then(res => {
	console.log(res)
	})
	// POST
	axios.post(
	'http://localhost:3000/comments',
	{
	"body": "other",
	"postId": 2
	}
	).then(res => {
	console.log(res)
	})

3. axios默认配置

	// default setting
	axios.defaults.method = 'GET'
	axios.defaults.baseURL = 'http:localhost:3000'
	axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

4. axios创建实例对象

	// 创建实例对象
	const obj = axios.create({
	baseURL: 'http://localhost:3000'
	})
	// obj实例和axios对象几乎相同
	obj({
	url: 'posts/2'
	}).then(res => {
	console.log(res)
	})

5. axios拦截器

	/**
	* 拦截器实质是函数
	* 请求拦截器，在请求发出时检查请求的参数等是否正确
	* 响应拦截器，在接受响应前，对响应进行预处理
	*/
	// 请求拦截器
	axios.interceptors.request.use(functio(config) {
	console.log('req success')
	return config
	}), function (error) {
	console.log('req fail')
	return Promise.reject(error)
	}
	// 接收拦截器
	axios.interceptors.response.use(functio(response) {
	console.log('res success')
	return response;
	}, function (error) {
	console.log('res fail')
	return Promise.reject(error);
	});

6. 取消请求

	let cancel = nul
	btns[0].onclick = function () {
	// 检查上一个请求是否结束
	if (cancel !== null) {
	cancel()
	}
	axios({
	url: '/posts',
	cancelToken: new axios.CancelTok(function executor(c) {
	cancel = c;
	})
	}).then(res => {
	cancel = null
	console.log(res)
	})
	btns[1].onclick = function () {
	cancel()
	}