项目中使用到axios,这里整理一下
axios的基础
为什么要使用axios?
什么是axios?
Axios是一个基于promise的http库,可以用在浏览器和node.js中
axios的特点
特点例子
执行get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行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');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
axios API
可以通过向axios传递相关的配置来创建请求
axios(config)
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios(url[,config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');
请求方法的别名
请求方法的别名注意:在使用别名方法的时候,URL、method、data这些属性都不必在配置中指定
并发
处理并发请求的助手函数
axios.all(iterable)
axios.spread(callback)
响应结构
某个请求的响应包括以下信息
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
使用then的时候,你将接收下面这样的响应:
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
在使用catch时候,或者传递rejection callback作为then的第二个参数时,响应可以通过error对象可被使用
错误处理
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
项目中的使用
作用
使用axios插件来支持发送http请求
引入
import axios from 'axios'
封装axios
其中部分参数使用formatRequest方法处理
/**
* 封装axios来发送http请求
* @param request 部分参数被处理,参考 formatRequest 方法;
* 注:其余选项参考 axios 的相关文档
*/
function httpRequest (request) {
return new Promise((resolve, reject) => {
axios.request(formatRequest(request))
.then(function (response) {
if (response.status === 200) {
if (response.data.code === '0000') {
// 后端请求发送成功
resolve(response.data)
} else {
// window.alert(response.data.errorMsg)
reject(response.data)
}
} else {
// window.alert('response status error: ', response.status)
reject()
}
})
.catch(function (error) {
// window.alert('request error: ', error)
reject()
})
})
}
formatRequest方法
/**
* 格式化http请求的相关配置项
* @param request 请求配置对象
*/
function formatRequest (request) {
if (request instanceof Object) {
// 对url进行处理
if (request.url) {
request.url = REQUEST_CONFIG[request.url]
}
if (request.token) {
// 对token进行处理
if (request.headers && typeof request.headers === 'object') {
if (request.headers.accessToken === undefined) {
Object.assign(request.headers, {
accessToken: request.token
})
}
} else {
request.headers = {
accessToken: request.token
}
}
delete request.token
}
}
return request
}
其中REQUEST_CONFIG
是引用了外部文件的对象
import REQUEST_CONFIG from '../config/request'
config文件下的request.js主要是为了统一方便API的管理
网友评论