Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）

您所在的位置：网站首页 › 对axios封装 › Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）

Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）

#Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）| 来源: 网络整理| 查看: 265

前言：axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个方法。

axios介绍

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

首先需要知道：axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

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

浏览器支持

axios面向现代浏览器设计，所以古老的浏览器并不支持。因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。

本文将通过具体实例介绍axios的基本使用方法与个性化配置（封装）。

直接开整！！！

1、新建一个Vue项目

2、安装axios

npm install axios

3、全局使用

//main.js import axios from 'axios' Vue.prototype.$axios = axios

4、基本使用案例

执行get请求

// 为给定 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请求

axios.post('/user', { firstname: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

执行多个并发请求

以上为基本使用，现在通过实例中实践一下

假如现在有某个接口（API），我们需要通过get请求调用，然后将返回数据渲染在页面上

api：https://api.apiopen.top/getJoke

入参：page=1、count=2、type=video

根据上面的基本使用案例可知，可以使用两种方式，接下来一一验证

1、URL地址参数拼接

由上面的api和入参可得拼接后的URL为：https://api.apiopen.top/getJoke?page=1&count=2&type=video（api后?将参数拼接，多个参数用&连接）

我是A组件

export default { name:'A', data(){ return { result:'' } }, mounted(){ //通过get请求（URL地址参数拼接）去调后台接口，并打印响应信息 this.$axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(res=>{ //这里使用箭头函数的形式 console.log(res,"响应信息") }) } } .main { width: 500px; height: 250px; margin: auto; background: rgb(18, 199, 42); }

刷新页面，打开F12，切换到Network，发现此时页面发送了请求

切换到Console，查看控制台打印信息

我们已经成功获取接口的响应信息（返回值），数据结构为json格式，此时我们可以将想要的数据渲染到页面上，展开查看json数据

如我们想要将红色部分的信息渲染在页面上，此时可以对响应信息稍作处理

我是A组件

{{result}} export default { name:'A', data(){ return { result:'' //默认值为''，请求成功后为其赋值 } }, mounted(){ this.$axios.get('https://api.apiopen.top/getJoke?page=1&count=2&type=video').then(res=>{ //console.log(res,"响应信息") this.result = res.data.message //改变data中的result值（默认为''） }) } } .main { width: 500px; height: 250px; margin: auto; padding: 10px; background: rgb(18, 199, 42); }

页面显示效果

2、传入params对象形式

另外一种get请求的写法，使用params对象，将所传参数当成params对象的键值对传入。以下可达到相同效果

this.$axios.get('https://api.apiopen.top/getJoke',{ params:{ //将URL地址拼接参数的形式换成传入params对象的形式 page:1, count:2, type:'video' } }).then(res=>{ //console.log(res,"响应信息") this.result = res.data.message //为data中的result赋值 })

这就是axios的基本使用，是不是很简单？

理解了get请求之后，post请求也就不难理解，除了请求方式（get变成了post）与请求参数的写法不同，其他写法基本一致。如下，如果此时为一个post请求，可以这么写

this.$axios.post('https://api.apiopen.top/getJoke', { //请求体为一个对象 page:1, count:2, type:'video' } ).then(res=>{ //console.log(res,"响应信息") this.result = res.data.message //为data中的result赋值 })

除了如上两种方式外还有其他的写法吗？那是当然，请继续往下看。

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

如get请求我们可以这么写

this.$axios({ method: 'get', url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video', }).then(res=>{ this.result = res.data.message })

进而也可以这么写

this.$axios({ method: 'get', url: 'https://api.apiopen.top/getJoke', params:{ page:1, count:2, type:'video' } }).then(res=>{ this.result = res.data.message })

与之前写法不同的是，我们直接把请求相关配置通过对象传入axios，如get请求此时用method:"get"表示，直接传入的url也使用url:"xxx"表示等等，这些成为一个对象的属性，该对象即为配置对象，形如axios(config)。

传递配置对象post请求案例

// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { //注意这里，get参数使用params，post参数使用data firstName: 'Fred', lastName: 'Flintstone' } })

那么我们在通过这种方式使用axios时，可传递的配置（配置对象的属性）都有哪些呢？请往下阅读请求配置。

请求配置

这些是创建请求时可以用的配置选项。只有 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 表示对响应的编码 // Note：对于 responseType 为 stream 或客户端请求会忽略 responseEncoding: 'utf-8', // xsrfCookieName 是用作 xsrf token 值的 cookie 名称 xsrfCookieName: 'XSRF-TOKEN', // default // xsrfHeaderName 是 xsrf token 值的 http 头名称 xsrfHeaderName: 'X-XSRF-TOKEN', // default // onUploadProgress 允许为上传处理进度事件 onUploadProgress: function (progressEvent) { // ... ... }, // onDownloadProgress 允许为下载处理进度事件 onDownloadProgress: function (progressEvent) { // ... ... }, // maxContentLength 定义允许的响应内容的最大尺寸 maxContentLength: 2000, // validateStatus 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise。 // 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve，否则 promise 将被 reject validateStatus: function (status) { return status >= 200 && status < 300; // default }, // maxRedirects 定义在 node.js 中 follow 的最大重定向数目 // 如果设置为 0，将不会 follow 任何重定向 maxRedirects: 5, // socketPath 用于在 node.js 中定义 UNIX Socket // e.g. '/var/run/docker.sock' to send requests to the docker daemon. // 只能指定 socketPath 或 proxy，如果两者同时指定，将使用 socketPath socketPath: null, // 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: 'rapunz31' } }, // cancelToken 指定用于取消请求的 cancel token cancelToken: new CancelToken(function (cancel) { // ... ... }) }

正是由于选项配置的多样性，我们可以根据这个配置来个性化axios，或者说是封装axios（往下会展开）。

配置默认值

我们可以指定将被用在各个请求的配置默认值，说白了就是设置请求的一些默认值，使得每次使用axios时都会传入相同的配置。

全局的axios默认值

使用axios.defaults.xxx的方式，如

axios.defaults.baseURL = 'http://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

如像刚刚我们的那个请求一样，如果整个项目的请求地址域名或上下文根都一样，那么我们就可以使用配置默认baseURL，举个例子，如下图

整个项目请求的url的前缀部分都是一样的，那么我们可以这样设置

//main.js import axios from 'axios' axios.defaults.baseURL = 'https://api.apiopen.top' Vue.prototype.$axios = axios

此时请求的url可以修改成如下所示

this.$axios({ method: 'get', url: '/getJoke', //此时会将baseURL与该url进行拼接成最终请求的url params:{ page:1, count:2, type:'video' } }).then(res=>{ this.result = res.data.message }) 自定义实例默认值

我们可以通过axios.create方式创建一个实例，为该实例配置默认值（该种方式可用于封装自定义axios，往下会展开）

// 创建实例时设置配置默认值 const instance = axios.create({ baseURL: 'https://api.example.com' }); // 实例创建之后可修改默认配置 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

如上我们讲了几种传入配置的请求方式，那么他们之间的优先级如何？

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置默认值来创建实例 // 此时超时配置的默认值是 1000 const instance = axios.create({ timeout:1000 }); // 覆写库的超时默认值 // 现在，在超时前，所有请求都会等待 2.5 秒 instance.defaults.timeout = 2500; // 为已知需要花费很长时间的请求覆写超时设置，即该方式优先级最高 instance.get('/longRequest', { timeout: 5000 }); axios封装（个性化配置）

axios封装在项目中也很常用，每个不同的项目可能请求的方式、参数配置或者请求响应前后处理等都不一样，因此需要封装合适自己项目的axios，通俗来说就是个性化配置。

之前我们都是引入axios就直接使用了，相当于使用是通用（默认）配置，接下来我们对axios进行封装。

首先，将main.js中的这些代码移除

然后，在main.js同级目录下新建axios.js文件

先进行简单配置，然后导出自定义axios实例（此时为封装好的）

import axios from "axios"; //创建一个axios实例 const instance = axios.create(); //这里我们使用默认配置 /*当然可以在创建的同时进行默认配置，更多配置请上面列出参考配置项 *如 const instance = axios.create({ * baseURL:'https://api.apiopen.top' * timeout:2000, * }); */ export default instance

在main.js中导入，然后全局使用

//main.js import axios from './axios' Vue.prototype.$axios = axios

此时可以正常使用封装好的axios

this.$axios({ method: 'get', url: 'https://api.apiopen.top/getJoke', //我们在封装axios时未配置baseURL，因此需要写全url params:{ page:1, count:2, type:'video' } }).then(res=>{ this.result = res.data.message })

在创建axios实例时，除了进行配置项的配置，还可以使用拦截器的方式进行设置axios实例。

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们，可对请求或响应做统一处理。

用法形如：

// 添加请求拦截器 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); } );

我们来简单使用一下，对axios实例加上拦截器，在请求之前跟响应之前分别打印出相关信息：

import axios from "axios"; //创建一个axios实例 const instance = axios.create(); /*当然可以在创建的同时进行默认配置 *如 const instance = axios.create({ * baseURL:'https://api.apiopen.top' * timeout:2000, * }); */ // 添加请求拦截器 instance.interceptors.request.use( function (config) { // 在发送请求之前做些什么 console.log('我要准备请求啦------') console.log(config,'请求配置') return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( function (response) { // 对响应数据做点什么 console.log('我接收到响应数据啦------') console.log(response,'响应配置') return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } ); export default instance

我们在请求前打印出“我要准备请求啦------”和请求配置，在响应前打印“我接收到响应数据啦------”和响应信息，刷新页面，控制台打印如下：

展开请求配置信息，可以发现，里面红框部分就是我们配置的，其他是默认的：

有了拦截器，我们就可以对请求和响应做一些个性化配置，如请求失败、成功的提示或逻辑处理以及响应失败、成功的逻辑处理等都可以在拦截器定义，包括一些提示、打印等等，这也是项目中常用的axios封装方式。

如果你想在稍后移除拦截器，可以这样：

const myInterceptor = instance.interceptors.request.use(function () { /* ... */ }); instance.interceptors.request.eject(myInterceptor); 错误处理

请求错误除了可以在拦截器统一处理，还可以对某个具体请求使用catch进行捕捉，如下所示

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 中，error.request 是 http.ClientRequest 实例 console.log(error.request); } else { // 引发请求错误的错误信息 console.log('Error', error.message); } console.log(error.config); });

也可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围：

axios.get('/user/12345', { validateStatus: function (status) { // 当且仅当 status 大于等于 500 时 Promise 才被 reject return status < 500; } });

以上就是axios的一些基本介绍，更多详情可以参考axios文档。

axios中文网|axios API 中文文档 | axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。http://www.axios-js.com/

【本文地址】

公司简介

联系我们