搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

Axios使用方法

[复制链接]
查看: 74|回复: 0

1万

主题

1万

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
45261
发表于 2020-2-14 17:05 | 显示全部楼层 |阅读模式
axios简介

Axios 是一个基于 promise 的 HTTP 库,可以用在欣赏器和 node.js 中。
axios的上风:


  • 从欣赏器中建立 XMLHttpRequests
  • 从 node.js 建立 http 请求
  • 支持 Promise API
  • 阻挡请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
axios的底子利用

怎样引入axios

可以经过npm安装来进利用用
  1. $ npm install axio
复制代码
也可以利用 bower举行安装,然后在页面及第行引入:
  1. $ bower install axios
复制代码
还可以利用CDN来举行引入到页面中去
  1. [/code][size=4]怎样利用axios[/size]
  2. 当我们引入了axios以后,接下来我们就要起头正式的利用axios了,对于axios的使方式比力多:
  3. 1、可以经过向 axios 传递相关设备来建立请求:axios(config)
  4. [code]// 发送 POST 请求axios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});
复制代码
2、在上面的方式的根柢上,我们还可以将url作为第一个参数传递给axios方式:axios(url,[config]),对于这样来说,假如我们没有传config,大要config中的method没有传的情况下,axios会默许利用get请求方式来举行请求:
  1. // 发送 GET 请求(默许的方式)axios('/user/12345');
复制代码
3、针对于get类的请求(get,delete,head,options)我们还可以利用axiosmethod,这样的形式来举行请求,这样的形似实在和我们所熟知的jquery中的ajax的很类似,可是还是有区此外,对于jquery的来说,我们的针对ajax的请求的传参都是利用data这样的字段来举行传递的,可是对于ajax来说,针对于get类的请求这样的请求,传递的数据,要末我们放在url上面,要末经过config中的params这个参数来举行设备。针对与post类的请求(post,put,patch),这样的请求来说,我们上面的我们可以经过config中的data来举行传递参数,除此之外,我们还可以经过过用以下的形式来举行传递参数:axiosmethod。下面是几个例子:
get请求:
  1. // 为给定 ID 的 user 建立请求axios.get('/user?ID=12345')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });// 可选地,上面的请求可以这样做axios.get('/user', {    params: {      ID: 12345    }  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });
复制代码
post 请求
  1. axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });
复制代码
具体的利用方式我们可以以下:
为方便起见,为全数支持的请求方式供给了别名

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])
4、固然,我们也重新建立一个新的axios实例来进利用用axios,然后经过实例来利用,其利用的方式,和以上三种利用方式类似。
  1. var instance = axios.create({  baseURL: 'https://some-domain.com/api/',  timeout: 1000,  headers: {'X-Custom-Header': 'foobar'}});instance.get('helloword.api')
复制代码
怎样利用axios来举行阻挡请求和响应

在谈阻挡请求和响应的前,我们先先容一下阻挡器这个概念:
(假如你熟悉中心件,那末就很好明白了,由于它起到的就是基于promise的中心件的感化)阻挡器分为请求阻挡器和响应阻挡器,望文生义:请求阻挡器(interceptors.request)是指可以阻挡住每次或指定http请求,并可点窜设备项响应阻挡器(interceptors.response)可以在每次http请求后阻挡住每次或指定http请求,并可点窜返回成果项。
针对于axios的阻挡器,严重分为请求阻挡器和响应阻挡器。请求阻挡器是指可以阻挡住每次请求大如果指定的http请求,而且可以点窜其设备项。响应阻挡器是指在http请求后,可以阻挡住每次的响应大如果指定http的响应,而且可以点窜其成果。
具体的利用进程:
  1. / 增加请求阻挡器const myRequestInterceptor = axios.interceptors.request.use(config => {    // 在发送http请求之前做些什么    return config; // 有且必须有一个config工具被返回}, error => {    // 对请求毛病做些什么    return Promise.reject(error);});// 增加响应阻挡器axios.interceptors.response.use(response => {  // 对响应数据做点什么  return response; // 有且必须有一个response工具被返回}, error => {  // 对响应毛病做点什么  return Promise.reject(error);});// 移除某次阻挡器axios.interceptors.request.eject(myRequestInterceptor);
复制代码
请求阻挡器和响应阻挡器的的利用处景。
请求阻挡器
1、在我们发送的请求中,我们每次都必要向后端传递的内容,比如说,用户登陆认证的token等相关的内容
2、假如我们必要对请求数据举行加密的情况下我们可以在请求阻挡器中增加
3、请求链接的处置惩罚
4、同一增加版本号等相关的内容
响应阻挡器
1、我们对响应成果必要举行同一处置惩罚的
2、我们对响应中的毛病举行同一处置惩罚,
3、我们对响应的数据举行同一处置惩罚
等等
怎样利用axios来举行取消请求

当我们发送一个请求,可是在发送进程中渴望取消请求,在传统的ajax中利用的,供给有abort()方式来取消ajax请求,可是在axios中,页供给了有关取消请求的方式,具体的利用方式以下:
  1. import axios from 'axios'// 第一种取消方式axios.get(url, {  cancelToken: new axios.CancelToken(cancel => {    if (/* 取消条件 */) {      cancel('取消日志');    }  })});// 第二种取消方式const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get(url, {  cancelToken: source.token});source.cancel('取消日志');
复制代码
怎样设备axios

在以上的利用方式中我们看到了在axios请求的时,我们可以增加设备项,可是可以设备的内容有哪些呢:
  1. {  // `url` 是用于请求的办事器 URL  url: &#39;/user&#39;,  // `method` 是建立请求时利用的方式  method: &#39;get&#39;, // 默许是 get  // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。  // 它可以经过设备一个 `baseURL` 便于为 axios 实例的方式传递相对 URL  baseURL: &#39;https://some-domain.com/api/&#39;,  // `transformRequest` 答应在向办事器发送前,点窜请求数据  // 只能用在 &#39;PUT&#39;, &#39;POST&#39; 和 &#39;PATCH&#39; 这几个请求方式  // 背面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream  transformRequest: [function (data) {    // 对 data 举行尽情转换处置惩罚    return data;  }],  // `transformResponse` 在传递给 then/catch 前,答应点窜响应数据  transformResponse: [function (data) {    // 对 data 举行尽情转换处置惩罚    return data;  }],  // `headers` 是行将被发送的自界说请求头  headers: {&#39;X-Requested-With&#39;: &#39;XMLHttpRequest&#39;},  // `params` 是行将与请求一路发送的 URL 参数  // 必须是一个无格式工具(plain object)或 URLSearchParams 工具  params: {    ID: 12345  },  // `paramsSerializer` 是一个负责 `params` 序列化的函数  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)  paramsSerializer: function(params) {    return Qs.stringify(params, {arrayFormat: &#39;brackets&#39;})  },  // `data` 是作为请求主体被发送的数据  // 只适用于这些请求方式 &#39;PUT&#39;, &#39;POST&#39;, 和 &#39;PATCH&#39;  // 在没有设备 `transformRequest` 时,必须是以下典范之一:  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams  // - 欣赏器专属:FormData, File, Blob  // - Node 专属: Stream  data: {    firstName: &#39;Fred&#39;  },  // `timeout` 指定请求超时的毫秒数(0 表示无超不时候)  // 假如请求话费了横跨 `timeout` 的时候,请求将被停止  timeout: 1000,  // `withCredentials` 表示跨域请求时能否必要利用按照  // 打一个例如假如在跨域请求的时候,假如我们必要向背景发送cookie的情况下,这个时候我们必要将这个字段设备成true  withCredentials: false, // 默许的  // `adapter` 答应自界说处置惩罚请求,以使测试更轻松  // 返回一个 promise 并利用一个有用的响应 (查阅 [response docs](#response-api)).  adapter: function (config) {    /* ... */  },  // `auth` 表示应当利用 HTTP 根柢考证,并供给按照  // 这将设备一个 `Authorization` 头,覆写掉现有的尽情利用 `headers` 设备的自界说 `Authorization`头  auth: {    username: &#39;janedoe&#39;,    password: &#39;s00pers3cret&#39;  },  // `responseType` 表示办事器响应的数据典范,可所以 &#39;arraybuffer&#39;, &#39;blob&#39;, &#39;document&#39;, &#39;json&#39;, &#39;text&#39;, &#39;stream&#39;  responseType: &#39;json&#39;, // 默许的  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的称号  xsrfCookieName: &#39;XSRF-TOKEN&#39;, // default  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的称号  xsrfHeaderName: &#39;X-XSRF-TOKEN&#39;, // 默许的  // `onUploadProgress` 答应为上传处置惩罚进度变乱  onUploadProgress: function (progressEvent) {    // 对原生进度变乱的处置惩罚  },  // `onDownloadProgress` 答应为下载处置惩罚进度变乱  onDownloadProgress: function (progressEvent) {    // 对原生进度变乱的处置惩罚  },  // `maxContentLength` 界说答应的响应内容的最大尺寸  maxContentLength: 2000,  // `validateStatus` 界说对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。假如 `validateStatus` 返回 `true` (大要设备为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte  validateStatus: function (status) {    return status >= 200 && status < 300; // 默许的  },  // `maxRedirects` 界说在 node.js 中 follow 的最大重定向数目  // 假如设备为0,将不会 follow 任何重定向  maxRedirects: 5, // 默许的  // `httpAgent` 和 `httpsAgent` 别离在 node.js 中用于界说在实行 http 和 https 时利用的自界说代理。答应像这样设备选项:  // `keepAlive` 默许没有启用  httpAgent: new http.Agent({ keepAlive: true }),  httpsAgent: new https.Agent({ keepAlive: true }),  // &#39;proxy&#39; 界说代理办事器的主机称号和端口  // `auth` 表示 HTTP 根柢考证该当用于毗连代理,并供给按照  // 这将会设备一个 `Proxy-Authorization` 头,覆写掉已有的经过利用 `header` 设备的自界说 `Proxy-Authorization` 头。  proxy: {    host: &#39;127.0.0.1&#39;,    port: 9000,    auth: : {      username: &#39;mikeymike&#39;,      password: &#39;rapunz3l&#39;    }  },  // `cancelToken` 指定用于取消请求的 cancel token  // (检察背面的 Cancellation 这节了解更多)  cancelToken: new CancelToken(function (cancel) {  })}
复制代码
以上就是axois中常用的设备项的内容。实在对于axios还有一个通用的默许设备,就比如说,我们请求超时的时候,如我们不会在每次请求的时候都去设备这个超不时候,那末我们又没方式可以大要举行同一设备这个超不时候的呢,实在我们可以经过利用default.config的方式来举行设备axios的通用的请求设备的内容。
  1. axios.defaults.baseURL = &#39;https://api.example.com&#39;;axios.defaults.headers.common[&#39;Authorization&#39;] = AUTH_TOKEN;axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;;
复制代码
小结

以上就是我自己总结的有关axios的利用方式,大要有些地方存在题目,这些对于axios的底子利用已经算富足的,假如渴望更深入的去了解axios,就必要我们在现实的利用进程中,不停的总结。总结我们碰到的现实的场景,而且场景中的具体的表现和现实治理思绪。

免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 全椒百姓网-全椒知名**,发布及时新鲜的全椒新闻资讯 生活信息 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表