axios用法总结

最新推荐文章于 2024-06-05 10:04:14 发布
置顶 最新推荐文章于 2024-06-05 10:04:14 发布
阅读量998 收藏 4
点赞数
分类专栏： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang__lei/article/details/107718989
版权

axios

以下图片均转载于B站，如有侵权，立即联系本人删除。




一、什么是axios？


官方文档：http://www.axios-js.com/zh-cn/docs/index.html


官方解释：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

个人理解就是用来发送网络请求的，并且支持 ES6 的新特性 promise 。



特性：

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



二、为什么选择axios？


在这里插入图片描述
在这里插入图片描述

选择一：对于选择一需要我们自己进行封装以及配置，这样调用起来就会比较麻烦。


选择二：对于选择二来说，我们需要用到 Jquery-Ajax ，我们只需要用到 Jquery 里边的 Ajax，但是却要引入整个 Jquery 框架，这样看起来也不合理。


选择三：Vue 官方曾经退出一个 Vue-resource ，但是在后边将不再对其进行维护，而 Vue 还一直在进行升级，这样就会导致新版本出现的东西，Vue-resource是否能够支持。


选择四：axios 有非常多的优点，上边已经做了介绍（特性），它是一个轻量级的框架。




三、安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>



四、axios支持多种请求方式：


请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

axios(config) //默认为get请求
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。


案例：

执行 GET 请求：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')  // *此处返回一个 promise*
  .then(function (response) { //成功时调用 then
    console.log(response);
  })
  .catch(function (error) {  //失败时调用 catch
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })  // *此处返回一个 promise*
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


注意：发送Get请求：从客户端往服务器回带数据用 params
	 发送Post请求：从客户端往服务器回带数据用 data

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }) // *此处返回一个 promise*
  .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');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {  
    // 两个请求现在都执行完成
  }));

处理并发请求的助手函数:
axios.all(iterable) => 里边传入的是一个数组，数组里边是对应的多个请求
axios.spread(callback) => 用于将callback展开，例如：将数组[res1,res2] 展开为 res1，res2



五、axios API


5.1 可以通过向 axios 传递相关配置来创建请求


axios (config)

// 发送 POST 请求
axios({
  method: 'post',  //请求的类型 get/post
  url: '/user/12345', // 请求的 url 地址
  data: {   // 请求时需要传递过去的参数
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});


// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

// 发送 GET 请求（默认的方法）
axios('/user/12345');


5.2 请求配置（config）


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

{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `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: 'brackets'})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `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; // default
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default

  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}



5.3 配置默认值(全局)

你可以指定将被用在各个请求的配置默认值


全局的 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';

自定义实例默认值（下面会进行讲解自定义axios实例）

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;



5.4 响应结构


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

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}




六、创建 axios 实例

可以使用自定义配置新建一个 axios 实例


6.1 为什么要创建 axios 实例呢？

  1. 当我们从 axios 模块中导入对象时，使用的实例是默认的实例。
  2. 当给该实例设置一些默认配置时，这些配置就被固定下来了。
  3. 但是后续开发中，某些配置可能会不太一样。
  4. 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息。

6.2 创建 axios 实例的语法

axios.create([config])

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

补充：

模块封装：我们在我们的程序中都使用到了第三方框架，如下所示，在我们的程序当中多处使用 import 语句导入第三方框架，假设有一天现在使用的第三方框架不在维护了，需要更换为其他框架，这样我们不得不在各个文件中逐一替换以前的框架，这样替换会比较麻烦，这时就需要使用模块封装，我们把第三方框架封装起来，然后在放到我们的应用程序中进行使用。

首先，我们需要创建一个我们自己的文件 request（命名自定义）

request.js

import axios from 'axios'

export function request(config,success,failure) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })

  //发送真正的网络请求
  instance(config)
    .then(res => { // 传入一个函数，把结果回调过去
      success(res)
    })
    .catch(err =>{
      failure(err) // 传入一个函数，把结果回调过去
    })
}

上边进行封装完模块以后，下边就可以进行调用了

main.js

//2.封装 request 模块
import {request} from "./network/request";

request({
  url:'/home/multidata'
},res => {  // 传入一个函数，用来接收结果
  console.log(res); 
}),err => {  // 传入一个函数，用来接收结果
  console.log(err);
}




还可以有另一中写法

request.js

import axios from 'axios'

export function request(config) {

  return new Promise((resolve,reject) => {
    //1.创建axios实例
    const instance = axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:5000
    })

    //发送真正的网络请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err =>{
        reject(err)
      })
  })
}

main.js

request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})




最终代码的优化，更简洁的写法

request.js

import axios from 'axios'

export function request(config) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })

  //发送真正的网络请求
  return instance(config) // 可以这样写的原因是：axios 本身就是一个 Promise
}

main.js

request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

经过上边模块的封装，当我们需要更换第三方框架时，只需要在 request.js 文件中修改 import 语句即可。




七、拦截器

在请求或响应被 then 或 catch 处理前拦截它们。axios 提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。


全局拦截器

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    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 实例里边的拦截器

request.js

import axios from 'axios'

export function request(config) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })

  //2.axios 的拦截器
  
  //2.1 请求拦截
  instance.interceptors.request.use(config => {
    console.log(config);
    //请求拦截的作用
    //1.比如 config 中的一些信息不符合服务器的要求

    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3.某些网络请求（比如登录（token）），必须携带一些特殊信息
    return config
  },err => {
    console.log(err);
  })

  //2.2 响应拦截
  instance.interceptors.response.use(result => {
    // result 是一个结果集
    console.log(result);
    return result
  },err => {
    console.log(err);
  })


  //发送真正的网络请求
  return instance(config)
}
liang__lei
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios教程
绝圣弃智-零的博客
03-06 2805
axios 特性 Make XMLHttpRequestsfrom the browser Make httprequests from node.js 支持 PromiseAPI 拦截 request 和response 传输 request 和response data 取消 requests 自动转换 for JSON data 提供防XSRF漏洞攻击的客户...
Axios使用详解
m0_70314224的博客
10-08 4244
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
Axios 使用详解
qq_34185872的博客
02-16 3382
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
axios设置 responseType为 “stream“流式获取后端数据
最新发布
SunFlower914的博客
06-05 2608
axios+stream这个方法和网上搜索出来的大多数流失接口方法一致，但是在axios中设置responseType为 "stream"，后控制台会警告：The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.因为axios基于XMLHttpRequest原生，而并XMLHttpRequest原生不直接支持responseType: 'stream'这个值。可以使用fetch来发送请求
axios的基本使用
qq_56088882的博客
08-03 7226
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
axios基本使用
weixin_45248436的博客
01-17 349
这里写自定义目录标题一、 axios简介功能特点：二、项目中安装axios库，在组件中想要网络请求时先引入axios三、使用方法1、发送简单的 get请求，发送post请求需要进一步处理，参考：[https://blog.csdn.net/qq_41000891/article/details/82902294](https://blog.csdn.net/qq_41000891/article/...
VUE中使用HTTP库Axios方法详解
10-15
总结，Vue中集成Axios能够使数据交互变得简单高效，通过Promise API和各种配置选项，开发者可以轻松地处理各种网络请求，实现丰富的前后端交互功能。无论是单个请求还是并发请求，Axios都提供了强大且易用的工具。
vue axios整合使用全攻略
08-27
以下是 vue axios 整合使用全攻略的知识点总结： 一、axios 配置 在使用 axios 之前，我们需要先安装 axios，然后配置 axios。在本篇文章中，我们将axios 配置写在了 src/axios/index.js 文件中。axios 配置包括了...
Vue学习之axios的使用方法实例分析
11-28
本文将详细解析Vue中axios的使用方法。 首先，使用axios之前，需要在项目中安装它。通过npm（Node Package Manager）可以轻松完成此步骤： ```bash npm install --save axios ``` 安装完成后，可以在项目中引入...
axios拦截设置和错误处理方法
08-27
axios拦截设置和错误处理方法 axios是当前流行的JavaScript库，用于发送HTTP请求。它提供了许多特性，例如拦截器、取消请求、JSON数据自动转换等。axios拦截设置和错误处理方法是axios的重要特性之一，它允许开发者...
使用axios请求时,发送formData请求的示例
10-16
总结一下，使用`axios`发送`FormData`请求的步骤包括： 1. 创建`FormData`实例。 2. 使用`append`方法添加键值对，包括对象属性（可能需要遍历）。 3. 设置请求头`Content-Type`为`multipart/form-data`。 4. 使用`...
Axios常见用法指南
漫漫漫漫的博客
06-14 349
axios是基于promise封装的异步请求插件，其中包含两套核心，基于浏览器的XHR核心，基于服务端http模块，可以兼容浏览器与服务端两个业务场景，同时通过了多种传参方式，拦截全局请求，全局数据格式化等功能，方便开发者使用。 一、发送请求 传统用法 类$.Ajax // 发送 POST 请求 axios({ method: '',//类型 url: '',// url data: { // data } }) .then(res=>{}) .catch(err=>{})
vue axios获取状态码（success，error）
Dreamer_xr的博客
11-21 2万+
    项目中遇到个小需求，当页面半个小时内无任何操作的时候，token自动失效，毫无疑问是要跳到登录页的，token失效后后端给我的状态码是412，那么好，这个412我就是获取不到，给中console.log就是打印不出我想要的status，最终还是找到了我想要的。     获取状态有两种写法：这里的api为配置的api文件，在main.js中引入，我的配置方法链接在这axios的API配置文...
Axios的不同responseType的使用场景
weixin_40243502的博客
11-07 1269
应用场景：用于将响应数据解析为 JSON 对象，适用于REST API和Web服务的调用。应用场景：用于接收二进制数据，通常是文件下载或处理图片、音频、视频等二进制数据的情况。应用场景：用于将响应数据解析为 HTML 文档对象，适用于获取和操作HTML文档的情况。应用场景：用于处理响应数据流，适用于大文件下载或需要逐行处理数据的情况。应用场景：用于将响应数据解析为纯文本，适用于文本内容的获取。类似，用于接收二进制数据，但通常用于文件下载等场景。一、arraybuffer。三、document。
修改axios的响应拦截器,解决账号密码错误不报错提示问题
YasWestmere的博客
12-23 686
一招教你解决ajax发送时登录错误密码不报提示,此招屡试不爽
axios的使用方式有几种？
努力努力再努力的博客
04-07 956
axios的使用方式有几种？ 第一种 ：直接挂载在原型上 import axios from "axios" Vue.prototype.$axios = axios ; 第二种 ：封装一个拦截器，有请求拦截器和响应拦截器，同时挂载到原型上，（缺点：只要是vue的实例上面都会挂载，消耗性能大） import axios from "axios" let $axios = axios.create({ baseURL: '',// 接口地址 timeout:5000,// 设置超时时间 }) // 请求
什么是axios（写给小白的理解笔记）
热门推荐
qq_41162375的博客
09-24 2万+
Axios：针对小白的笔记
Axios简介
fj123321666的博客
03-27 4908
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiospromise异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
axios（非常全面）
my的博客
04-05 2609
项目中涉及到的多个请求的配置很多都是相同的，如get请求，其他配置可能都相同，只有url不同。那相同部分代码就会造成冗余，通过二次封装，可以实现接口代码复用。疑问：axios本身就是promise，为什么在进行封装请求方法的时候还要在外面加一层promise。后端：中间件/服务端进行跨域相关配置，在项目中新建允许跨域配置类。先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去。这里主要介绍前端的跨域解决方案,都是做配置项，实现代理转发。一些具体的业务，需要携带一些参数。在本地调试的时候，还需要在。
总结vue2的axios的常用api使用方法
03-23
Vue2中使用axios的常用API包括： 1. axios.get(url[, config])：发送一个GET请求，返回一个Promise对象，可以在then()方法中获取响应数据。 2. axios.post(url[, data[, ...以上是Vue2中axios的常用API使用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值