axios在vue中的使用

文章目录


一、axios是什么?

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

二、使用步骤

2.1 下载

powershell 复制代码
npm install  axios -S

2.2 引入

powershell 复制代码
import axios from 'axios'

2.3 使用

Get请求

js 复制代码
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请求

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

发起多个并发请求

javascript 复制代码
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进行请求

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

Forms

Multipart (multipart/form-data)

javascript 复制代码
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)

javascript 复制代码
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

javascript 复制代码
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

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);
}
相关推荐
小阮的学习笔记12 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜13 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=13 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧16 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck18 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!38 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。44 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端