axios在vue中的使用

文章目录

• 一、axios是什么？
• 二、使用步骤
• • 2.1 下载
  • 2.2 引入
  • 2.3 使用
  • • Get请求
    • Post请求
    • Forms
• 三、封装

---

一、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); }