Axios笔记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Axios笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6957字，纯文字阅读大概需要10分钟。
内容图文
-
环境配置
安装好npm+webpack+axios
npm init --y
npm i webpack webpack-cli -D
npm i axios -S
-S 生产环境
-D 开发环境 -
axios基本用法
请求方法的别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
impo
rt axios from "axios";
axios.get('http://api.eduwork.cn/admin/link?id=1').then(res=>{
console.log(res);
}).catch(function (error) {
console.log(error);
});
axios.get('http://api.eduwork.cn/admin/link', {params:{id:1}}).then(res=>{
console.log(res);
});
axios.post('http://api.eduwork.cn/admin/link/add', "name=测试&url=eduwork&ord=5&do_submit=yes").then(res=>{
console.log(res);
参数配置
//默认get方法
axios('http://localhost/axios/getapi.php?name=zhangsan&age=19')
.then(res=>{
console.log(res);
console.log(res.data)
});
//上面的请求也可以这样做
axios({
method:'get',
url:'http://localhost/axios/getapi.php',
params: {
username:'zhangan',
age:10,
sex:'nan'
}
}).then(res=>{
console.log(res);
});
//post请求
axios({
method:'post',
url:'http://localhost/axios/getapi.php',
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
username:'zhangan',
age:10,
sex:'nan'
}
}).then(res=>{
console.log(res);
});
- 并发请求处理
ajax请求过多对页面性能可能会有影响，以及代码不美观，代码过于臃肿，所以我们可以使用 axios的并发请求axios.all()
处理并发请求的助手函数：
axios.all(iterable)
axios.spread(callback)
axios.all([
axios.get('http://api.eduwork.cn/admin/link?id=1'),
axios.get('http://api.eduwork.cn/admin/link?id=7'),
axios.get('http://localhost/axiosdemo/getapi.php?id=100')
]).then(res=>{
//分别打印每个请求的返回响应
console.log(res[0]);
console.log('----------------');
console.log(res[1]);
console.log('----------------');
console.log(res[2]);
}).catch(err=>{
console.log("-------------error-----------");
console.log(err);
});
//上面的打印代码还可以这样写
axios.all([
axios.get('http://api.eduwork.cn/admin/link?id=1'),
axios.get('http://api.eduwork.cn/admin/link?id=7'),
axios.get('http://localhost/axiosdemo/getapi.php?id=100')
]).then(
//分别打印每个请求的返回响应
axios.spread((res1, res2, res3)=>{
console.log(res1);
console.log(res2);
console.log(res3);
})
).catch(err=>{
console.log("-------------error-----------");
console.log(err);
})；
- 全局配置
指定各个请求的配置默认值
全局的axios默认值
axios.defaults.baseURL="http://api.eduwork.cn/admin";
axios.defaults.timeout=3000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.get('link?id=8').then(res=>{
console.log(res);
}).catch(err=>{
console.log("--------error---------");
console.log(err);
})
axios.post('link/add', "name=helloword&url=lmonkey&ord=5&do_submit=true").then(res=>{
console.log(res);
}).catch(err=>{
console.log("--------error---------");
console.log(err);
})
- axios实例封装
有时候后台接口地址有多个并且超时时长不一样，我们不可能在axios中把每个后台请求的域名地址都拼接在URl中，并且在axios中的config写不同的超时时长，很繁琐，这个时候可以用到axios实例，在实例中可以配置这两种参数。
可以使用自定义配置新建一个 axios 实例
axios.create([config])
假如新建了一个axios实例但是没有参数，取得就是全局的配置值，实例中如果有则优先取实例中的。
实例的配置优先于全局配置
axios.defaults.baseURL="http://api.eduwork.cn/admin";
axios.defaults.timeout=3000;
let eduwork = axios.create({
baseURL:"http://api.eduwork.cn/admin",
timeout:5000
});
let local1 = axios.create({
baseURL:"http://localhost/axiosdemo",
timeout:3000
});
//使用了实例配置
eduwork.get('link?id=1').then(res=>{
console.log(res);
}).catch(err=>{
console.log("--------error---------");
console.log(err);
})
local1.get('getapi.php?id=1000').then(res=>{
console.log(res);
}).catch(err=>{
console.log("--------error---------");
console.log(err);
})
//使用全局配置
axios.get('link?id=8').then(res=>{
console.log(res);
}).catch(err=>{
console.log("--------error---------");
console.log(err);
})
axios实例的相关配置（config参数）
- baseURL：请求的域名基本地址（如：http://localhost:8080）
- timeout：后端定义的超时时长（默认是1000ms） url：请求的路径（如：/data.json）
- method：请求方法（get、post…） headers：设置请求头 params：请求的参数拼接在url中
- data：请求的参数放在request body中
- axios拦截器
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 每次发送请求之前判断是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = window.localStorage.getItem("token");
token && (config.headers.Authorization = token);
return config; //放行
},
error => {
//对请求错误做些什么
return Promise.error(error);
}
);
//响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
return Promise.reject(error.response);
}
}
);
移除拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
为自定义axios实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
- 请求配置
{
//url用于请求的服务器url具体地址
url:"/user",
method:'get',
//baseUrl会自动添加到url前面，除非url是一个绝对地址
baseURL:'https://www.baidu.com/',
//允许在想服务器发送数据之前对数据进行处理，修改
transformRequest:[function(data){
return data;
}],
//允许在请求返回的data数据传递给then或者catch之前，对数据进行处理，修改
transformResponse:[function(data){
return data;
}],
//自定义请求头
header:{
'X-Requested-With':'XMLHttpRequest'
},
//添加在URL中发送的参数
params:{
id:158
},
//序列化params
paramsSerializer:function(params){
return params
}，
data:{},
//请求超时设置
timeout:100,
//跨域请求时是否需要使用凭证
//允许自定义处理请求，测试使用
adapter:function(config){},
//在验证，应该使用HTTP基础验证，并提供凭据
auth:{
username:"",
password:""
},
responseType:"",
//xsrfCookingName用作XSRF-TOKEN的cookie名称，不是很理解
xsrfCookingName:"XSRF-TOKEN",
xsrfHeaderName:"XSRF-TOKEN",
//允许为上传处理进度事件
onUploadProgress:function(){},
//允许为下载处理进度事件
onDownloadProgress:function(){},
maxContentLength:2000, //响应内容最大尺寸
//定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function(status){
return
},
maxRedirects:5 ,//最大重定向数量
//分别在node.js中用于定义在执行http和https时使用的自定义代理
httpAgent:new http.Agent({keepAlive: true}),
httpsAgent: new https.Agent({keepAlive: true}),
proxy:{
host:"192.168.0.1",
port: 8080,
auth:{
username:"",
password:""
},
//指定用来取消请求的cancel token
cancelToken:new CancelToken(function(cancel){})
}
内容总结
以上是互联网集市为您收集整理的Axios笔记全部内容，希望文章能够帮你解决Axios笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】