文章目录
一、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);
}