目录

  • 1. axios 特点
  • 2. axios 响应结果属性
  • 3. axios 常用 API
  • 4. get 传递参数
  • 5. post 传递参数
  • 6. axios 全局配置
  • 7. axios 拦截器
  • 8. async await 基本用法


1. axios 特点

  1. 支持浏览器和 node.js;
  2. 支持 Promise ;
  3. 可以拦截请求和响应;
  4. 自动转换为 JSON 数据;

2. axios 响应结果属性

headers:响应头信息;
data:响应回来的实际数据;
status:响应状态码;
statusText:响应状态信息;

3. axios 常用 API

  1. get :查询数据;
  2. post :添加数据;
  3. put :修改数据;
  4. delete : 删除数据;

4. get 传递参数

get 传递参数有 url 和 params 选项两种方法;

  1. url 传递参数:参数直接写在 url 后面;
// 前端传递
axios.get('http://localhost:3000/isget?id=1').then(res => console.log(res.data); )

// 后端
app.get('/isget', (req,res) => {
	res.send('get--url 传递参数:' + req.query.id);
})
// 前端传递
axios.get('http://localhost:3000/isget/1').then(res => console.log(res.data); )

// 后端
app.get('/isget/:id', (req,res) => {
	res.send('get--Restful 传递参数:' + req.params.id);
})
  1. params 选项传递参数;
// 前端传递
axios.get('http://localhost:3000/isparams',{
	params:{
		id:1 // 这里可以传递多个参数
	}
}).then(res => console.log(res.data); )

// 后端
app.get('/isparams', (req,res) => {
	res.send('get--params 传递参数:' + req.query.id);
})

5. post 传递参数

// 前端传递
axios.post('http://localhost:3000/ispost',{
	uname:'andy',
	age:20
}).then(res => console.log(res.data); )

// 后端
axios.post('/ispost', (req,res) => {
	res.send('post 传递参数:' + res.body.uname + res.body.age);
})
// 前端传递
const params = new URLSearchParams();
params.append('uname','andy');
params.append('age','20');
axios.post('http://localhost:3000/ispost',params).then(res => console.log(res.data); )

// 后端
axios.post('/ispost', (req,res) => {
	res.send('post 传递参数:' + res.body.uname + res.body.age);
})

6. axios 全局配置

  • axios.defaults.timeout 超时时间
    设置一定的时间限制,当 axios 发送请求后,未在设定的时间按时返回数据,认为出错;
axios.default.timeout = 3000;
  • axios.default.baseURL 请求的基准 URL 地址

在发送请求的时候,axios 会自动将基准 url 地址和 get 中的路径进行拼接;
基准 URL 方便书写,减少路径重复,帮助解决跨域问题;

// 写法一:
axios.get(http://localhost:3000/aioxs-get).then();

// 写法二:
axios.default.baseURL = 'http://localhost:3000/'
axios.get(aioxs-get).then();
  • axios.default.headers[ ' ' ] 设置请求头

请求头需要后台配置成功,前端方可向后端发送请求头;
请求头用于登录

axios.default。headers['mytoken'] = 'asdfghjtyuio7gh';

7. axios 拦截器

  1. 请求拦截器
    axios 在向服务器发送请求之前,会经过请求拦截器,根据这一特性,可以在请求拦截器中设置一些信息
    axios.intercetors.request.use( )
axios.interceptors.request.use(function(config) {
	// 在请求发出之前进行一些信息设置
	config.headers.mytoken = 'nihao'; // 设置请求头,在请求拦截器中设置请求头更加灵活
	return config;  // 信息设置完成,需要将 config 返回出去
},function(err) {
	// 处理响应的错误信息
	console.log(err);
})
  1. 响应拦截器
    在 axios 获取返回数据之前进行拦截,在响应拦截器中同样可以对数据进行一些加工处理;
    axios.intercetors.response.use( )
axios.interceptors.response.use(function(res) {
	// 在此处对返回的数据进行处理
	res = res.data;
	return res;
},funtion(err) {
	// 处理响应的错误信息
	console.log(err);
})

8. async await 基本用法

async 关键字用在函数前,使用 async 关键字的函数返回值是 Promise 实例对象;
await 关键字用在 async 函数内,异步函数之前,可以得到异步的结果;

async function getData() {
	const ret = axios.get('data'); // ret 的值为 axios 异步请求得到的数据
	return ret;
}

getData.then(ret => {
	console.log(ret);
})