axios在vue中的使用

一、axios是什么？

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

二、使用步骤

2.1 下载

npm install  axios -S

2.2 引入

import axios from 'axios'

2.3 使用

Get请求

import axios from 'axios'
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Post请求

发起一POST请求

axios.post('/user',{
	firstName:'Fred',
	lastName:'Flintstone'
}).then(function(response){
	console.log(response);
}).catch(function(error)){
	console.log(error);
}

发起多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);

// OR

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function ([acct, perm]) {
    // ...
  });

将HTML Form 转换JSON进行请求

const {data} = await axios.post('/user', document.querySelector('#my-form'), {
  headers: {
    'Content-Type': 'application/json'
  }
})

Forms

Multipart (multipart/form-data)

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3],
    photo: document.querySelector('#fileInput').files
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
)

URL encoded form (application/x-www-form-urlencoded)

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3]
  }, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
})

三、封装

在src下创建utils目录，在该目录下创建文件 request.js

import axios from "axios";
import router from '../router/index'
// 1、创建axios对象
const service = axios.create({
	baseURL: 'http://localhost:9090/drsm',
});
//2、请求拦截器 
service.interceptors.request.use(config => {
	//在headers中加入认证信息。
	// if(token){
	//        config.headers['Token'] = token
	//    }
	return config
}, error => {
	Promise.reject(error);
})

//响应拦截器
service.interceptors.response.use(
	(response) => {
		//console.log(response);
		const {
			data
		} = response;
		if (data.code === 200 || data.code === 201) {
			//回传的数据
			return data;
		} else {
			return Promise.reject(new Error(data.message))
		}
	},
	error => {
		let msg;
		//console.log(error);
		if (error.response) {
			switch (error.response.status) {
				case 500:
					msg = "500-服务器发生错误，请及时联系管理员"
					break;
				case 404:
					msg = "404-你访问的页面不存在"
					break;
				case 401:
					msg = "401-请先登录系统，再完成操作"
					break;
				case 403:
					msg = "403-额...没有权限访问"
					break
				default:
					msg = "555-发生错误，请及时联系管理员"
					break;
			}
			//登录界面发生错误时不跳转到错误页，
			if(error.config.url=='/login'){
				return Promise.reject(new Error(msg))
			}
			router.push({
				path: '/error',
				query: {
					msg: msg
				}
			});
		} else {
			msg = "连接不到目标服务器"
		}

		return Promise.reject(new Error(msg))
	}
)

export default service;

在utils下创建api目录，接着创建文件 course.js

import qs from 'qs'
import service from '@/utils/request'


export function loginReq(name, pwd) {
	const data = {
		username: name,
		password: pwd
	};
	return service.post('/login',qs.stringify(data));
}


export function addUserReq(user){
	return service.post('/addUser',qs.stringify(user));
}

export function userExist(username){
	let url = '/userExist/'+username;
	return service.get(url);
}