目录

  • 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);
})