Open yuanyuanbyte opened 2 years ago
本系列的主题是 JavaScript 专题,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
Axios是对XMLHttpRequest的封装,受到尤雨溪大神推荐使用。
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic [ˌaɪsə'mɔrfɪk] 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
promise
node.js
浏览器
isomorphic
[ˌaɪsə'mɔrfɪk]
http
导入axios:
axios
const axios = require('axios');
// 向给定ID的用户发起请求 axios.get('/user?ID=12345') .then(function (response) { // 处理成功情况 console.log(response); }) .catch(function (error) { // 处理错误情况 console.log(error); }) .then(function () { // 总是会执行 });
◾ 上述请求也可以按以下方式完成(可选):
axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { // 总是会执行 });
◾ 同时axios也支持async/await用法:
async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); } }
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
(性能优化)
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]; });
▪ 发起一个post请求:
// axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
▪ 在 node.js 用GET请求获取远程图片:
// axios({ method: 'get', url: 'http://bit.ly/2mTM3nY', responseType: 'stream' }) .then(function (response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });
▪ axios的默认请求方式
// 发起一个 GET 请求 (默认请求方式) axios('/user/12345');
为了方便起见,已经为所有支持的请求方法提供了别名:
注意
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
一个请求的响应包含以下信息:
{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 是服务器响应头 // 所有的 header 名称都是小写,而且可以使用方括号语法访问 // 例如: `response.headers['content-type']` headers: {}, // `config` 是 `axios` 请求的配置信息 config: {}, // `request` 是生成此响应的请求 // 在node.js中它是最后一个ClientRequest实例 (in redirects), // 在浏览器中则是 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); });
您可以指定默认配置,它将作用于每个请求。
全局 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';
(高级知识)
在请求或响应被 then 或 catch 处理前拦截它们。
◾ 添加请求拦截器
// 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
◾ 添加响应拦截器
// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 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 的范围 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 请求已经成功发起,但没有收到响应 // `error.request` 在浏览器中是 XMLHttpRequest 的实例, // 而在node.js中是 http.ClientRequest 的实例 console.log(error.request); } else { // 发送请求时出了点问题 console.log('Error', error.message); } console.log(error.config); });
查看全部文章
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。
本系列的主题是 JavaScript 专题,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
网络请求库 Axios 实用入门
Axios是对XMLHttpRequest的封装,受到尤雨溪大神推荐使用。
Axios 是什么
Axios 是一个基于
promise
网络请求库,作用于node.js
和浏览器
中。 它是isomorphic
[ˌaɪsə'mɔrfɪk]
的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。Axios 的特点
发起一个 GET 请求
导入
axios
:◾ 上述请求也可以按以下方式完成(可选):
◾ 同时
axios
也支持async/await用法:发起一个 POST 请求
发起多个并发请求
(性能优化)
传递相关配置创建请求
▪ 发起一个post请求:
▪ 在 node.js 用GET请求获取远程图片:
▪ axios的默认请求方式
请求方式别名
为了方便起见,已经为所有支持的请求方法提供了别名:
注意
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
响应结构
一个请求的响应包含以下信息:
当使用 then 时,您将接收如下响应:
默认配置
您可以指定默认配置,它将作用于每个请求。
全局 axios 默认值:
拦截器
(高级知识)
在请求或响应被 then 或 catch 处理前拦截它们。
◾ 添加请求拦截器
◾ 添加响应拦截器
如果你稍后需要移除拦截器,可以这样:
可以给自定义的 axios 实例添加拦截器。
错误处理
参考
查看全部文章
博文系列目录
交流
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。