草庐IT

axios浅析（一）

Skywang 2023-09-25 原文

一、axios是什么

  axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。

特性

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

  实际上，axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios

简单来说，axios的基本原理就是

  • axios还是属于 XMLHttpRequest， 因此需要实现一个ajax。或者基于http 。
  • 还需要一个promise对象来对结果进行处理。

基本使用

安装

// 项目中安装
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入

import axios from 'axios'

发送请求

axios({        
 url:'xxx',    // 设置请求的地址
 method:"GET", // 设置请求方法
 params:{      // get请求使用params传参,如果是post请求则用data
   name:''
 }
}).then(res => {  
 // res为后端返回的数据
})

二、为什么要封装

  axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。

  这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

举个例子：

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true, // 当前请求为跨域类型时是否在请求中协带cookie 需要注意的是当配置了  xhr.withCredentials = true时，必须在后端增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) { // 允许在向服务器发送前，修改请求数据
    // 对 data 进行任意转换处理
    return data;
  }],
  transformResponse: [function (data) { // 在传递给 then/catch 前，允许修改响应数据
    // 对 data 进行任意转换处理
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

  如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了，这时候我们就需要对axios进行二次封装，让使用更为便利

点击看下篇如何封装

浅析axioscodedata

有关axios浅析（一）的更多相关文章

  1. javascript - Node.js、Vue.js 和 Passport.js。 .isAuthenticated() 总是返回 false？可能是 Axios header ？ - 2

    我正在将一个项目转移到Vue.js，但我无法让我的任何中间件检查用户是否已登录或检查用户对工作的所有权。经过无休止的搜索，我认为问题是我从客户端发送到服务器的header不包含Passport序列化用户或其他内容？我怎样才能使它工作？这是我在后端的登录路径:router.post("/login",function(req,res,next){if(!req.body.username||!req.body.password){res.send("Error");}elseif(req.body.username.length>40||req.body.password.length>

  2. javascript - axios 并发请求数 : any way to get the results from the successful requests even if some have failed? - 2

    我正在尝试了解如何在javascript中处理并发异步请求，您是否知道使用axios获取成功请求结果的方法，即使请求失败了？如果不是，您将如何处理这种情况？varaxios=require('axios')varoptions=[{baseURL:'https://some-base-url',url:'/some-path&key=some-key',method:'post',data:'some-data'},{baseURL:'https://some-base-url',url:'/some-path&key=some-key',method:'post',data:'som

  3. javascript - 使用 axios post 捕获错误正文 - 2

    我从我的后端代码发送一个状态代码422，响应正文包含错误描述。我正在使用如下的axiospost来发布请求:post:function(url,reqBody){constrequest=axios({baseURL:config.apiUrl,url:url,headers:{'Content-Type':'application/json','Authorization':sessionStorage.getItem('token')},method:'POST',data:reqBody,responseType:'json'});returnrequest.then((res)

  4. javascript - Axios 未在请求中发送自定义 header (可能是 CORS 问题) - 2

    我遇到了一个问题，axios似乎没有随我的请求发送自定义header。我是这样使用它的:axios({method:'get',url:'www.my-url.com',headers:{'Custom-Header':'my-custom-value'}})但是，查看发送到服务器的实际请求，自定义header似乎并不在任何地方。REQUESTHEADERS:Accept:*/*Accept-Encoding:gzip,deflate,brAccept-Language:es-ES,es;q=0.9Access-Control-Request-Headers:custom-header

  5. javascript - 在 axios 超时后得到通知 - 2

    我有一个使用axios的API调用。超时设置为2500毫秒。我想要的是axios在超时后返回一个值，这样我就可以通知用户请求由于某些服务器或网络错误而中止。我是如何初始化超时的constinstance=axios.create();instance.defaults.timeout=2500;下面是超时后应该返回值的函数_post(url,body,token){returnnewPromise((resolve,reject)=>{instance.post(url,body,{headers:{'Accept':'application/json','Content-Type':

  6. javascript - 使用 axios 获取访问 token - 2

    我正在使用LyftAPI，并试图弄清楚如何使用带有Node脚本的axios获取访问token。我可以使用Postman手动获取访问token，方法是填写如下表单:当我填写表格时，我可以成功地从Lyft获得一个新token。我试图通过这样做将其转换为使用axios的POST请求:varaxios=require('axios');vardata={"grant_type":"client_credentials","scope":"public","client_id":"XXXXXXXXX","client_secret":"XXXXXXXX"};varurl="https://api

  7. javascript - 如何使用 Axios 从 JSON 中获取数据？ - 2

    我正在尝试使用Axios在表中以JSON格式获取服务器端数据，但无法理解如何获取每个字段，如id、companyInfo等。json:[{"id":1,"companyInfo":1,"receiptNum":1,"receiptSeries":"АА","customerName":"Mark","customerSurname":"Smith","customerMiddleName":"Jk","customerPhone":"0845121","services":[2,16]}]axios:store.dispatch((dispatch)=>{dispatch({type:

  8. javascript - Laravel 5.5 Axios POST 导致 419 错误 - 2

    我正在尝试从Vue向我的LaravelAPI发出POST请求。X-CSRF-TOKENheader设置正确(我在发送到服务器的POST包中看到了这一点)。路由有默认的web-middleware。请求Accept:application/json,text/plain,*/*Accept-Encoding:gzip,deflateAccept-Language:de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7Connection:keep-aliveContent-Length:2Content-Type:application/json;charset=UTF-

  9. javascript - 语法错误 : Unexpected identifier with axios - 2

    我正在尝试按如下方式使用axios:importaxiosfrom'axios';axios.post("http://localhost:3000/test",{"prop1":"value"},{headers:{'X-Custom-Header':'foobar'}})然后编译器报错:/home/developer/Desktop/reason/interoperate/src/Ax.js:1(function(exports,require,module,__filename,__dirname){importaxiosfrom'axios';^^^^^SyntaxError:

  10. javascript - 用于使用游标对 api 进行分页的 Axios 递归 - 2

    如何使用axios对带有游标的API进行分页？我想递归调用此函数直到response.data.length并在完成后返回包含集合中所有项目的整个数组。另外，值得注意的是，我必须将光标传递到后续调用中。functiongetUsers(){returnaxios.get('/users')//APIsupportsacursorparam(?after=).then(response=>{//returnsanarraywithacursor//seeresponsebelowconsole.log(response.data)})}示例响应:{"total":100,"data":[

随机推荐