axios usage

1. Features of axios

1. Support browser and node.js;
2. Promises are supported;
3. Can intercept requests and responses;
4. Automatic conversion to JSON data;

2. Axios response result attribute

headers: response header information;
data: actual data returned by the response;
status: response status code;
statusText: response status information;

3. axios common API

1. get : query data;
2. post : add data;
3. put : modify data;
4. delete : delete data;

4. get pass parameters

There are two methods for get to pass parameters: url and params options;

1. url transfer parameters: the parameters are written directly after the 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);
})

2. The params option passes parameters;

// 前端传递
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 passing parameters

// 前端传递
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 global configuration

• axios.defaults.timeoutTimeout time
  Set a certain time limit. When axios sends a request, it does not return data within the set time, and considers an error;

axios.default.timeout = 3000; 

• axios.default.baseURLThe base URL address of the request

When sending a request, axios will automatically splice the base URL address and the path in get; the
base URL is easy to write, reduces path duplication, and helps solve cross-domain problems;

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

// 写法二：
axios.default.baseURL = 'http://localhost:3000/'
axios.get(aioxs-get).then();

• axios.default.headers[ ' ' ]set request header

The request header needs to be configured successfully in the background before the front end can send the request header to the backend;
the request header is used for login

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

7. axios interceptor

1. The request interceptor
   axios will pass through the request interceptor before sending the request to the server. According to this feature, some information can be set in the request interceptor
   axios.intercetors.request.use( )

axios.interceptors.request.use(function(config) {
    
    
	// 在请求发出之前进行一些信息设置
	config.headers.mytoken = 'nihao'; // 设置请求头，在请求拦截器中设置请求头更加灵活
	return config;  // 信息设置完成，需要将 config 返回出去
},function(err) {
    
    
	// 处理响应的错误信息
	console.log(err);
})

2. The response interceptor
   intercepts before axios obtains the returned data, and the data can also be processed in the response interceptor;
   axios.intercetors.response.use( )

axios.interceptors.response.use(function(res) {
    
    
	// 在此处对返回的数据进行处理
	res = res.data;
	return res;
},funtion(err) {
    
    
	// 处理响应的错误信息
	console.log(err);
})

8. Basic usage of async await

The async keyword is used before the function, and the return value of the function using the async keyword is a Promise instance object;
the await keyword is used in the async function, and the asynchronous result can be obtained before the asynchronous function;

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

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