axios基本用法

什么是Axios
Axios本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

一. axios的三种写法

// 第一种写法
axios.get('/query?name=tom').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第二种写法
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第三种写法
axios({
  method: 'get',
  url: '/query',
  data: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

二. 各种请求的写法

1.get

function axiosGet() {
	axios({
		method: 'get',
		url: 'https://music.benwebsite.cloud/banner',
		headers: {
			'content-type': 'application/json'
		} ,
		params: {
			type: 2 
		}
	}).then(res => {
		console.log('成功');
		console.log(res);
	}).then(err => {
		console.log('err');
	})
}

2.post

function axiosPost() {
	axios({
		method: 'post',
		url: 'https://music.benwebsite.cloud/banner',
		headers: {
			'content-type': 'application/json'
		} ,
		params: {
			type: 2 
		}
	}).then(res => {
		console.log('成功');
		console.log(res);
	}).then(err => {
		console.log('err');
	})
}

3.put

function axiosPut() {
	axios({
		method: 'put',
		url: 'https://music.benwebsite.cloud/banner',
		headers: {
			'content-type': 'application/json'
		} ,
		params: {
			type: 2 
		}
	}).then(res => {
		console.log('成功');
		console.log(res);
	}).then(err => {
		console.log('err');
	})
}

4.delete

function axiosDelete() {
	axios({
		method: 'delete',
		url: 'https://music.benwebsite.cloud/banner',
		headers: {
			'content-type': 'application/json'
		} ,
		params: {
			type: 2 
		}
	}).then(res => {
		console.log('成功');
		console.log(res);
	}).then(err => {
		console.log('err');
	})
}