概述

三方调用方式js库,基于promise,强力max。

基本用法

axios.get(url).then(ret =>{
	console.log(ret.data);//data属性固定写法
})

常用API

POST / GET / PUT / DELETE
一、GET

//url传递参数
axios.get('***?id=123').then(ret => {
	console.log(ret.data);
})

//restful方式传参,一系列传参方式改变,后台都需要改动
axios.get('***/123').then(ret => {
	console.log(ret.data);
})

//params方式
axios.get('***',{
	params:{
		id:'123'
	}
}).then(ret => {
	console.log(ret.data);
})

二、POST
默认传递json格式

//通过选项传递参数
axios.post('***',{
	name:'abc',
	pwd:'123'
}).then(ret => {
	console.log(ret.data);
})

//通过urlSearchParams传递参数
//(application/x-www-form-urlencoded)
const params = new urlSearchParams();
params.append('name','abc');
params.append('pwd','123');
axios.post(url,params).then(ret => {
	console.log(ret.data);
})

其他两个delete\put不说了,跟get\post类似,百度吧。。。敲不动了

响应结果

主要属性:
data 实际响应返回数据
headers 响应头信息
status 响应状态码
statusText 响应状态信息

axios.post(url).then(ret => {
	console.log(ret);
})

打印如下:
ret返回结果

全局配置

超时时间
axios.defaults.timeout = 3000 ;
默认地址
axios.defaults.baseURL = ‘******’;

axios.defaults.baseURL = ' http://localhost:8888';
axios.get('axios-url').then(ret => {//url前面的省略
	console.log(ret);
})

设置请求头
axios.defaults.headers[‘mytoken’] = ‘******’;

//跨域的请求头需要后台配置
axios.defaults.headers['mytoken'] = 'helloworld';
axios.get(url).then(ret => {
	console.log(ret);
})

axios拦截

一、请求拦截器
aioxs----->拦截器----->服务器

//添加请求拦截器
axios.interceptors.request.use(function(config){
	console.log(config.url)
	//在请求发出之前进行一些信息配置
	config.headers.mytoken = 'hellokugou'
	return config;
},function(error){
	//处理相应错误信息
})
axios.get(url).then(function(data){
	console.log(data);
})

data打印结果

二、响应拦截器
axios<-----拦截器<-----服务器
数据返回之前进行加工处理

//添加请求拦截器
axios.interceptors.respons.use(function(res){
	console.log(res)
	var data = res.data;//把数据处理了一下
	return data;
},function(error){
	//处理相应错误信息
})
axios.get(url).then(function(data){
	console.log(data);//不需要再通过.data获取数据,可以直接取到
})
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐