泉州网站制作定制,wordpress优化图片,网站建设方案 安全,平面广告设计好学吗Axios是什么
Axios是一个基于Promise的网络请求库#xff0c;作用于node.js和浏览器中。在服务端使用原生node.js http模块#xff0c;在客户端使用XMLHttpRequest。是基于Promise对Ajax的封装。
Axios的特性
从浏览器创建XMLHttpRequests从node.js创建http请求支持Promis…Axios是什么
Axios是一个基于Promise的网络请求库作用于node.js和浏览器中。在服务端使用原生node.js http模块在客户端使用XMLHttpRequest。是基于Promise对Ajax的封装。
Axios的特性
从浏览器创建XMLHttpRequests从node.js创建http请求支持Promise API拦截请求和相应转换请求和响应数据取消请求自动转换JSON数据客户端支持抵御XSRF
安装
npm i axios
yarn add axiosAxios基本使用
使用前记得导入axios 发送GET请求
axios.get(/user?id1234).then(res {console.log(res)}).catch(error {console.log(error)}).then(() {//总会执行})注意传递参数的方式路径后加’?后拼接参数。还可以用另一种方式传递参数
axios.get(/user,{params: {id: 1234}
}).then(res {console.log(res)}).catch(error {console.log(error)}).then(() {//总会执行})不在地址后面进行拼接axios.get()这个方法第一个参数是要请求的路径第二个参数是一个对象可以在这个对象中加一些配置参数就写在这里的params里面。也可以使用async/await
async function getUser(){try{const res await axios.get(/user?id1234)console.log(res)}catch (error){console.error(error)}
}注意要用一个函数包裹起来并在前面加上async注意要使用try-catch捕获错误注意await的位置。
POST请求/多请求
发送一个POST请求
axios.post(/user,{firstname: qiling,lastname: wuxie
}).then(res {console.log(res)
}).catch(error {console.log(error)
})axios.post() 方法的第一个参数是请求的地址第二个参数是一个对象是要post的数据。 如果发起多个请求可以使用Promise.all。这个方法可以处理多个Promise:
function getUserAccount() {return axios.get(/user/12345);
}function getUserPermissions() {return axios.get(/user/12345/permissions);
}Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {const acct results[0];const perm results[1];});注意Promise.all()接收的参数是一个Promise对象数组后面.then接收到的结果也是一个数组是一个由上面的Promise对象数组返回的结果构成的数组。
Axios实例
使用自定义配置新建一个实例:
const instance axios.create({baseURL: http://some-domain.com/api/,timeout: 1000,headers: {X-Custom-Header: foobar}
})axios.get()等方法都是实例方法。
请求配置
以下是创建请求时可以使用的配置。只有url是必须的。不指定method请求就默认是GET
url 请求的服务器的urlmethod 创建请求时使用的方法baseURL 自动加在url前面transformRequest: [function(data, header) { return data }]发请求前修改请求数据只能用于postputpatchtransformResponse: [function (data) { return data }] 传递给 .then/catch之前修改相应数据headers: {‘X-Requested-With’: ‘XMLHttpRequest’} 自定义请求头params: { id: 12345 } 设置与请求一起发送的URL参数必须是简单对象data: { firstname: ‘qiling’ } 作为请求体被发送的数据timeout 指定请求超时的毫秒数proxy 定义代理服务器的主机名端口协议validatestatus: function (status) { return status 200 status 300; // 默认值 } 如果返回true就resolved,否则就是rejectedcancelToken: new CancelToken(function (cancel) { }) 使用cancel token取消请求cancel token由CancelToken.source()创建
响应结构
一个请求的响应包含以下信息
{//服务器提供的响应data: {},//来自服务器响应的HTTP状态码status: 200,//来自服务器响应的状态信息statusText: OK,//服务器响应头headers: {},//axios请求的配置信息config: {},//生成此响应的请求在浏览器中是XMLHttpRequest实例request: {}
}使用.then 时将获得以下相应
axios.get(/user/12345).then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});数据状态码状态信息响应头请求的配置信息生成此响应的请求。如果使用catch相应可通过error对象被使用。
拦截器
在请求或响应在被then和catch处理之前拦截它们 添加请求拦截器
axios.interceptors.request.use(function (config) {//在发送请求之前做什么return config
},function (error){//对请求错误做些什么return Promise.reject(error)
})添加响应拦截器
axios.interceptors.request.use(function (response){//2xx范围内的状态玛都会触发这个函数//对相应数据做些什么return response
}, function (error) {//超出2xx范围的状态码都会触发这个函数//对相应错误做些什么return return Promise.reject(error)
})移除拦截器
const myInterceptor axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);自己定义的axios实例也可以添加拦截器
const instance axios.create();
instance.interceptors.request.use(function () {/*...*/});错误处理
axios.get(/user/12345).catch(function (error) {if(error.response) {//请求成功且得到响应但是状态码不是2xx....} else if(error.request){//请求成功没得到响应//error.request 在浏览器中是 XMLHttpRequest 的实例....}else {//请求的发送出问题了console.log(error.message)}})默认是超出2xx范围就错误但是使用使用 validateStatus 配置选项可以自定义抛出错误的 HTTP code。
axios.get(/api,{//注意要把status作为参数传进去validateStatus: function (status) {return status 500}
})可以对error对象进行toJSON获取更多错误信息
axios.get(/user/12345).catch(function (error) {console.log(error.toJSON());});
