axios面试题

起步

Axios是什么？

Axios是一个基于promise的网络请求库，可用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块，而在客户端(浏览器端)则使用XMLHttpRequests。

特性

• 从浏览器创建XMLHttpRequests，从node.js创建http请求
• 支持promise API
• 拦截请求和相应，转换请求和相应数据，取消请求，自动转换JSON数据
• 客户端支持防御XSRF

安装

npm install axios

基本用例

用例

发起一个GET请求

import axios from 'axios'

//axios.能够提供自动完成和参数类型推断功能
axios.get('/user?ID=12345').then(res => {
	//处理成功
	console.log(res.data)
}).catch(err => {
	//处理错误情况
}).then(()=>{
	//总会执行
})

//上述请求也可以按以下方式完成
axios.get('/user',{
	params:{
		ID:12345,
	},
}).then().catch().then()

//支持async/await用法
//async/await是ECMAScript 2017中的一部分，而在IE和一些旧的浏览器中不支持，使用时要小心
async function getUser(){
	try{
		const res = await axios.get('/user?ID=12345')
		console.log(res.data)
	} catch(err){
		console.log(err)
	}
}

POST请求

发起一个POST请求

axios.post('/user',{
	firstName:'Fred',
	lastName:'Flintstone',
}).then(res => {
	console.log(res.data)
}).catch(err => {
	console.log(err)
}).then()

发起多个并发请求

function getUserAccount(){
	return axios.get('/user/12345')
}

function getUserPermissions(){
	return axios.get('/user/12345/permissions')
}

//Promise从哪里来？
Promise.all([getUserAccount(),getUserPermissions()]).then(res => {
	const acct = results[0];
	const perm = results[1];
})

Axios API

可以向axios传递相关配置来创建请求
axios(config)

//发起一个post请求
axios({
	method:'post',
	url:'/user/12345',
	data:{
		firstName:'Fred',
		lastName:'Flintstone',
	}
})

axios(url,[,config])

//发起一个GET请求(默认请求方式)
axios('/user/12345')

Axios实例

您可以使用自定义配置新建一个实例
axios.create([config])

const instance = axios.create({
	baseUrl:'https://some-domain.com/api/',
	timeout:1000,
	headers:{
		'X-Custom-Header':'foobar',
	},
})

请求配置

这些是创建请求时可以用的配置选项。只有URL是必须的，如果没有指定method，请求将默认使用GET方法

{
	//url是用于请求的服务器URL,
	url:'/user',
	//method是创建请求时使用的方法
	method:'get',//默认值
	//baseUrl将自动加在url前面，除非url是一个绝对url
	//它可以通过设置一个baseURL便于为axios实例的方法传递相对URL
	baseUrl:'https://some-domain.com/api/',
	//transformRequest允许在向服务器发送前，修改请求数据
	//它只能用于PUT，POST，PATCH这几个请求方法
	//数组中最后一个函数必须返回一个字符串，一个Buffer实例，ArrayBuffer，FormData，或Stream
	//你可以修改请求头
	transformResponse:[data => {
		//对接收的data进行任意转换处理
		return data;
	}],
	//自定义请求头
	headers:{
		'X-Requested-With':'XMLHttpRequest',
	},
	//params是与请求一起发送的URL参数
	//必须是一个简单对象或URLSearchParams对象
	params:{
		ID:12345,
	},
	//paramsSerializer是可选方法，主要用于序列化params
	paramsSerializer:function(params){
		return Qs.stringify(params,{
			arrayFormat:'brackets',
		})
	},
	//data是作为请求体被发送的数据
	//仅适用put，post，delete，patch方法
	//在没有设置transformRequest时，则必须是以下类型之一：
	//string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams,
	//浏览器专属 FormData，File，Blob
	//Node专属 Stream,Buffer
	data:{
		firstName:'Fred',
	},
	//timeout指定请求超时的毫秒数
	//如果请求时间超过timeout的值，则请求会被中断
	timeout:1000,//默认值0,（永不过时）
	//withCredentials表示跨域请求时是否需要使用凭证
	withCredentials:false,//default
	//adapter允许自定义处理请求，这使测试更加容易
	adapter:function(config){
		//
	},
	//auth HTTP Basic Auth
	auth:{
		username:'xxx',
		password:'xxx',
	},
	//responseType表示浏览器将要相应的数据类型
	//选项包括'arraybuffer','document','json','text','stream'
	//浏览器专属：blob
	responseType:'json',//默认值
	//validateStatus定义了对于给定的HTTP状态码是resolve还是reject promise
	//如果validateStatus返回true（或者设置为null或undefined），
	//则promise将会resolve，否则rejected
	validateStatus:function(status){
		return status>=200 && status<300;//默认值
	},
}

响应结构

一个请求的响应包含以下信息

{
	//data由服务器提供的响应
	data:{},
	//status来自服务器响应的HTTP状态码
	status:200,
	//statusText来自服务器响应的HTTP状态信息
	statusText:'OK',
	//headers是服务器响应头
	//所有header名称都是小写，而且可以使用方括号语法访问
	//例如response.headers['content-type']
	headers:{},
	//config是axios请求的配置信息
	config:{},
	//request是生成此响应的请求
	//在node.js中它是最后一个ClientRequest实例
	//在浏览器中则是XMLHttpRequest实例
	request:{},
}

当使用then时，您将接收如下响应

axios.get('/user/12345').then(res => {
	console.log(res.data)
	console.log(res.status)
	console.log(res.statusText)
	console.log(res.headers)
	console.log(res.headers)
	console.log(res.config)
})

当使用catch，或者传递一个rejection callback作为then的第二个参数时，响应可以通过error对象使用。

默认配置

您可以指定默认配置，它将作用于每个请求

全局axios默认值

axios.defaults.baseUrl = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

自定义实例默认值

//创建实例时配置默认值
const instance = axios.create({
	baseUrl:'https://api/example.com',
})
//创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTO_TOKEN

配置的优先级

配置将会按优先级进行合并，它的顺序是，在lib/defaults.js中找到的库默认值，然后是实例的defaults，最后是请求的conig参数。后面的优先级要高于前面的。

//使用库提供的默认配置创建实例
//此时超时配置的默认值为0
const instance = axios.create()

//重写库的超时默认值
//现在所有使用此实例的请求超时时间为0.5s
instance.defaults.timeout = 2500

//重写此请求的超时时间，因为该请求需要更长时间
instance.get('/longRequest',{
	timeout:5000
})

拦截器

在请求或响应被then或catch处理签拦截它们

//添加请求拦截器
axios.interceptors.request.use(config => {
	//在发送请求之前做些什么
	return config
},err => {
	//对请求错误做些什么
	return Promise.reject(err)
})

//添加响应拦截器
axios.interceptors.response.use(res=>{
	//2xx范围的状态码都会触发该函数
	//对响应数据做点什么
	return response
},err=>{
	return Promise.reject(err)
})

如果你需要稍后移除拦截器，可以这样

const myInterceptor = axios.interceptors.request.use(/*...*/)
axios.interceptors.request.eject(myInterceptor);

可以给自定义的axios实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(/**/)

错误处理

axios.get('/user/12345').then(res => {
	console.log(res.data)
}).catch(err => {
	//请求成功且服务器也响应了状态码，但状态码超出了2xx的范围
	if(err.response){
		console.log(err.response.data)
		console.log(err.response.status)
		console.log(err.response.headers)
	}
	//请求已经成功发起，但是没有收到响应
	//error.request在浏览器中是XMLHttpRequest的实例，
	//在node.js中是http.ClientRequest的实例
	else if(err.request){
		console.log(err.request)
	}
	//发送请求时出现问题
	else{
		console.log('Error',err.message)
	}
	console.log(err.config)
})

使用validateStatus配置选项，可以自定义抛出错误的HTTP code

axios.get('/user/12345',{
	validateStatus: status =>{
		return status < 500; //处理状态码小于500的情况
	}
})

使用toJSON可以获取更多关于HTTP错误的信息

axios.get('/user/12345').then(res => {
	console.log(res.toJSON())
}).catch(err => {
	console.log(err.toJSON())
})

取消请求

Axios支持以fetch API的方式，AbortController取消请求

const controller = new AbortController();
axios.get('/foo/bar',{
	signal:controller.signal
}).then(res => {
	console.log(res.data)
})

//取消请求
controller.abort()

请求体编码

默认情况下，axios将js对象序列化为JSON，要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

浏览器

1. 使用URLSearchParams API

const params = new URLSearchParams();
params.append('id','123')
params.append('username','xxx')
axios.post('/foo',params)

2. 使用qs库编码数据

import qs from 'qs'
let data = {
	id:'12345',
	username:'xxx',
}
axios.post('/foo',qs.stringify(data))

Node.js

1. Query string(存在bug)
2. URLSearchParams API
3. 使用qs库编码数据
4. Form data
5. 拦截器