ToB企服应用市场:ToB评测及商务社交产业平台

标题: axios详解 [打印本页]

作者: 金歌 时间: 2024-8-23 06:40
标题: axios详解
1.axios介绍

1.1 什么是axios?

Axios 是一个基于 promise 的网络哀求库，可以用于欣赏器和 node.js中。
Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络哀求的库。
axios（ajax i/o system）不是一种新技能，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。
1.2 axios和ajax的区别

axios是通过promise实现对ajax技能的一种封装，而ajax则是实现了网页的局部数据刷新。
axios可以说是ajax，而ajax不止是axios。
用法相同，但个别参数不同。

axios用法：

axios({
url: '/getName',
method: 'get',
responseType: 'json', // 默认的
data: {
name: 'tom'
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
});

复制代码

ajax的用法：

$.ajax({
url: '/getName',
type: 'get',
dataType: 'json',
data: {
name: 'tom'
},
success: function (response) {
console.log(response);
}
});

复制代码

2.axios的基础用法

2.1 安装axios

利用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

复制代码

利用 npm:

$ npm install axios

复制代码

利用 bower:

$ bower install axios

复制代码

利用 yarn:

$ yarn add axios

复制代码

2.2 GET哀求

通过给定的ID来发送哀求

方式一

axios({
method:"GET",
url:'/user',
params:{
ID:12345
}
});

复制代码

方式二

axios('/user',{
method:"GET",
params:{
ID:12345
}
});

复制代码

方式三

axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
//处理结果
console.log(response);
})
.catch(function(error){
//处理错误
console.log(error);
});

复制代码

2.3 POST哀求

axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
//处理结果
console.log(res);
})
.catch(function(error){
//处理错误
console.log(error);
});

复制代码

2.4 哀求方式的别名

axios对不同哀求方式都提供了方便的别名，当我们在利用别名方法的时候，url、method、data这几个参数不需要在配置中声明。

axios.request(config);
axios.get(url[,config]);
axios.delete(url[,config]);
axios.head(url[,config]);
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

复制代码

3.axios的进阶用法

3.1 axios实例的创建与配置

创建axios实例

语法： axios.create([config])

var instance = axios.create({
baseURL:"https://some-domain.com/api/",
timeout:1000,
headers: {'X-Custom-Header':'foobar'}
});

复制代码

用创建的实例对象发送哀求

instance.get('/a.json',{
timeout: 3000
}).then()

复制代码

axios相关配置

这些是创建哀求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，哀求将默认利用 GET 方法。
参数说明urlurl是哀求的服务器所在methodmethod是哀求资源的方式baseURL如果url不是绝对所在，那么baseURL将会加到url的前面params将哀求参数拼接到url上data将哀求参数放置到哀求体里headers哀求头timeout哀求的超时时长，单位毫秒

配置示例

let instance = axios.create({
// 创建实例时设置配置默
baseURL: "", //请求的域名/基本地址
timeout: 2000, //请求的超时时长，单位毫秒，默认。
url: "/data.json", //请求路径
method: "get", //请求方法
headers: {
//设置请求头————我们可以给请求头添加一些参数
token: "",
post: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
},
params: { id: 5 }, //将请求参数拼接到url上
data: { id: 5 }, //将请求参数放置到请求体里
});

复制代码

三种配置方式

axios全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 1000

复制代码

axios实例配置

let instance = axios.create();
instance.defaults.timeout = 1000

复制代码

axios哀求配置

instance.get('/login',{
timeout:1000
})

复制代码

配置方式的优先级：axios全局配置 < axios实例配置 < axios哀求配置
3.2 拦截器

哀求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

复制代码

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});

复制代码

移除拦截器

// 添加请求拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
// 移除请求拦截器
axios.interceptors.request.eject(myInterceptor)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)