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);
}
相关推荐
dr李四维7 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_21 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~28 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ31 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z37 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴40 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue