axios怎么安装及使用

这篇文章主要介绍“axios怎么安装及使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“axios怎么安装及使用”文章能帮助大家解决问题。

axios基于es6的promise机制。Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。Axios支持Promise API，在浏览器中发送XMLHttpRequests请求，在node.js中发送http请求；也可以拦截请求与响应，或转换请求数据和响应数据。

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

axios基本介绍

axios

是目前前端使用非常广泛的网络请求库，包括Vue作者也是推荐在

vue

中使用

axios

；

它是一个封装好的http请求库，他是基于es6的promise机制实现的。

浏览器基于XMLHttpRequest对象封装的，跟Ajax一样，只不过他们开放的API使用有差别而已；

• 主要特点包括：

• 在浏览器中发送

  XMLHttpRequests

  请求；

• 在

  node.js

  中发送

  http

  请求；

• 支持

  Promise API

  ；

• 拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。

• 转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF
  

项目环境介绍

使用

@vue/cli 4.5.13

 版本创建一个只包含

vue

的项目，创建完成之后安装

npm install axios

库

所以整个项目的环境看起来就是这样

当然，并不是说

axios

不能够在非

vue

的环境下使用，这里我只是为了写代码方便，普通的，使用浏览器

script

 标签 引入

axios

，在

window

对象上就会有一个

axios

对象，这样你在浏览器环境使用和我在

vue

中使用起来就是完全一致的了。

看起来就像这样：

• 引入

• 效果

请求地址

httpbin.org/

这个网址学习http的时候大家应该都会听说，对这个网址发请求，你发送请求的内容会原样的响应回来。

基本使用

第一个请求

我们先看一下官方文档给我们介绍的

axios api

列表

axios(config)axios(url[, config])
----------------------分割线----------------------
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]])

分割线前面的方法，官方给了示例，分割线后面的方法，官方只是提了一下。

看到这里可能还有点懵，写点代码就立刻能看清楚拉。

根据

axios

的官方文档。我们先来简单的发起一个

get

方法吧。

在

app.vue

中，我们引入

axios

，并且使用

axios

携带参数发送了一个

get

请求。

我们先来看一下浏览器的网络请求

可以看到，我们发出的请求是成功了的。我们现在再来看一下我们 then中打印出来的响应结果。

我们发现

then

中，打印出来的东西好像比我们网络请求的返回值内容要多。但是

data

这个对应的值就是我们请求返回的结果。

ok

。到现在，我们是可以使用

axios

发送网络请求了。但是现在我们还是有很多的疑问。

• axios({})

  这个方法能发出一个网络请求，但是方法传入的对象是什么意思呢？

• then

  打印出来的

  res

  返回值中，为什么会多了很多其他的参数？

axios的配置

axios

的官方文档中已经给出了很多的介绍了。当然如果你是萌新，可能看起来会特别难受，啊，我就简单学一个

axios

，有这么多东西要记吗？

当然不是啦！我现在就来简单的 使用我的理解翻译一些 常用的配置

{
  // url(常用)  表示我们用来发请求的地址
  url: '/user',

  // method(常用)  表示我们用来发请求的方法，默认是get
  method: 'get',

  // baseURL(常用)  表示我们用来发请求跟 URL,最终发起请求的地址是 baseURL+url
  baseURL: 'https://some-domain.com/api/',

  // headers(常用)  配置我们发起的网络请求的请求头，通常是携带token用来鉴权
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // params(常用) 这里配置的对象会作为参数拼接到url上  ?username=xiaomin&password=123456
  // 通常是 get请求携带参数的地方(重要)
  params: { username: 'xiaomin', password: '123456' },

  // data(常用)  data中的参数会被放到请求体中
  // 通常是 post,put,delete请求携带参数的地方(重要)
  // 可以传输二进制，例如上传图片用的 FormData对象就可以用data来传输
  data: {
    firstName: 'Fred'
  },

  // timeout(常用)  设置请求的超时时间，超过了时间请求还没有响应的会会报错走到catch，默认值是0 表示一直等待响应
  timeout: 1000,
  
  // onUploadProgress 用来监听上传的进度，一般图片上传时候的显示进度条这里会用上
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
}

上面是很常用的配置，推荐还是全部记住，当然，我后面还会依据这些配置去做一些

axios

的高级用法

返回包装对象介绍

axios

在返回值的时候，是会默认的对我们的这次请求进行一次包装。

官方文档页给了一个很详细的说明，我再来用我的语言翻译一下下吧。

{
  // 请求响应的返回值
  data: {},
  // 请求状态
  status: 200,
  // 状态说明文字
  statusText: 'OK',
  // 请求的请求头
  headers: {},
  // 这次请求用到的 配置  指 刚刚问题一的配置
  config: {},
  // 请求实例  表示 axios 底层 封装的 XMLHttpRequest 的信息
  request: {}
}

ok

。现在我们从发起请求到响应结果的这个过程中我们都有所了解了。

接下来我在介绍一些经常忽略的地方和一些小技巧

小误区

我们看到上面的代码，因为我们发起请求，

• get请求的参数一般是拼接到url上，所以我们在axios中会用 params这个配置来携带我们请求参数

• post请求的参数一般是放在请求体里面的，所以我们会在axios中使用data这个配置来表示我们的请求参数

小技巧

在

axios

api

介绍中，

针对

get

，我们发现还有这样的一个

api

。

axios.get(url[, config])

我们来试一下怎么玩，改装一下我们的

testGet

方法

可以看出，

axios.get

这个

api

只是把

url

和

method

这两个配置拆出来了。

注意啊，

axios.get

这里有两个参数，第一个是url，第二个是 我们的配置选项。

注意

那么问题来了，这两种写法有什么区别呢？

直接翻看源码找找定义。

axios

包下的

index.js

引入了

./lib/axios

，这里又引入了一个

./core/Axios

在这个

./core/Axios

中。我们就可以看到下面的内容。

我们可以看到，他就是在原型上绑定了 我们常用的

get post put ....

等常用方法，让他去调

this.request

方法，参数就是把我们的配置信息给合并了，

mergeConfig

看方法名就知道这个是合并

Config

的一个方法，返回了最终的配置信息对象。

在29行这里还定义了

request

方法，大致看一下就是根据配置，做一些优化

比如方法名大小写转换。

比如最终给我们包装成了一个

promise

对象返回

所以本质上，

axios({})

 和我们的

axios.get(url,{})

是两个一模一样的方法。

ok

，

axios.post

 

axios.put

等用法，和

get

类似

这两种方法 可以说是萝卜白菜，各有所爱。各有各的喜好，你自己使用那种方法就看你喜欢哪种啦。

文件上传

话不多说贴代码先，

uploadImg() {
  console.log(this.file);
  const formData = new FormData();
  formData.append('file', this.file);
  axios({
    url: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
    method: 'post',
    data: formData,
    onUploadProgress(progressEvent) {
      let complete = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + '%';
      console.log('上传 ' + complete);
    },
  }).then((res) => {
    console.log('uploadImg res==>', res);
  });
},

其中

this.file

是我们  

input type

为

file

选中文件后，

e.target.files

的值，当然，这个值是数组，我们需要他的第一个

注意的就是使用

data

传递了一个参数，参数类型是

FromData

。

---

好的到这里，我们就简单的学习的

axios

的使用，当然会有很多的小伙伴说，就这啊，这个东西不是看一眼就会的吗？

既然看到了这里。我肯定不会让你白来的。加下来我们说一下高级用法。

高级用法

学习高级用法之前，我们要问一下，为什么要这样做。我们之前那样做有哪些问题？

• 我们真实的开发环境中，会有线上地址，开发地址，测试地址。这些地址我们怎么样能够做到快速的切换呢？

• 我们发现在

  axios

  的配置中，我们每一次都会改变的是

  url

  method

  data

  params

  ，很少改变的是

  header

   

  baseurl

  timeout

  ，那么针对很少变动的我们能不能统一的封装一下。

• 每一次发请求的时候我想在控制台上输出一下我当前请求的信息，能不能封装起来，不要每一次都编写。

• axios

  的返回值里面，有太多东西是我们不需要的了，我们明明关注的只是 返回的

  data

  ，每一次请求返回的时候我们都要

  res.data

  一下，很烦，这一步能不能省略呢？

• 请求往往会遇到一些错误，这些错误我每一次都需要在

  catch

  中处理，代码写的又臭又长，明明只是一个

  log error

  的功能，可是每一次请求的地方都需要写

  catch

  ，这里能不能省略呢？

ok，有了问题，我们接下来写代码就会方便很多了。一个个解决，干就完事了。

axios对象

在解决上面的问题之前，我们先介绍一些

axios

的高级用法，一开始，我们引入了

axios

，直接使用

axios({})

，方法传递配置的方式发起网络请求，在

axios

中进行配置的方法，一共有3总

全局默认配置

我们可以直接在

axios.default

上进行默认配置

// 全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 1000 * 5

axios实例配置

axios

有一个

create

方法，返回的其实还是一个

axios

对象，但是我们在

create

中可以指定一些默认配置，返回的实例对象使用的时候就会遵循这些默认配置。

// axios实例默认配置
const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000 * 8
});

axios方法配置

这个我们见过了，就不多说了。

// 方法配置
axios({url: '',baseURL: 'https://api.example.com', timeout: 1000 * 10})

ok，介绍了三种配置，我们说一下配置的优先级

• 优先是请求的

  config

  参数配置；

• 其次是实例的

  default

  中的配置；

• 最后是全局的配置；

生产环境，开发环境，测试环境。

可能很多小伙伴还不懂这三个环境有什么区别。

首先假设我们的三种环境对应的地址如下

// 生产环境
192.168.0.1:8080/
// 开发环境
192.168.0.1:8080/dev/
// 测试环境
192.168.0.1:8080/test-a/

首先，项目是前后端分离的，我们会先在测试环境下编写代码，测试环境的意思是，前端和后端的代码都是在实时编写的，比如我们前端对接的后端有2个人A,B，开发环境就有个一个功能发起的请求是要发送到A的电脑上的（A后端正在开发中），地址可能就是

192.168.0.1:8080/test-a

，明天来编写代码又是要和B对接，这个时候的请求是会发送到B的电脑上，地址可能就是

192.168.0.1:8080/test-b

。测试环境的意思就是代码实时在编写，功能结构是联调到别人的本地。

现在代码开发了一个星期，开发的差不多了，就会将代码提交到开发环境。这个时候接口就是对接的

192.168.0.1:8080/dev

这个地址

首先要明确，我们一直编写代码属于测试环境，提交到开发环境是代码的一个小版本编写完成了，代码在开发环境下是没有我们本地测试环境变动的那么快，我们之后在编写其他功能的时候又是对接的测试环境。

提交到开发环境之后，公司里面的产品呀，测试人员呀，就会在开发环境上，使用你的代码，看看你的代码有没有什么

bug

，如果有

bug

，你就需要在你的测试环境去修改

bug

，修改完成之后在提交到开发环境让他们去测试，直到最终没有

bug

了，开发环境的代码就会被提交到生产环境，生产环境的意思是这里的代码是面向用户了，是让哪些什么都不懂的用户来使用了。

有点绕口，小总结一下。

生产环境是面向用户的

开发环境是面向测试人员的，他们来找bug的

测试环境是面向 我们这些coder的，我们在这里编写代码

当然，有一些小公司是没有测试环境的，每一次代码都是后端编写完成提交到开发环境，前端直接对接开发环境的，遇到问题了后端就去改代码，改完之后需要打包发布到开发环境，这样前端才能继续对接，就没有测试环境直接连接到后端开发的电脑上这么方便。

baseUrl

这个

baseUrl

是什么东东，第一次见的人可能有点迷惑。举个栗子：

添加用户功能的接口可能是下面这样的：

// 生产环境
192.168.0.1:8080/user/add
// 开发环境
192.168.0.1:8080/dev/user/add
// 测试环境
192.168.0.1:8080/test-a/user/add

我们很快就发现了，明明我们添加用户只是关心  

/user/add

这个路径，哪怕切换了环境后面的路径也是不会修改的，那我们每次写代码能不能忽略前缀呢？

当然可以，这就是

baseUrl

的作用

可以理解成，真正的

请求地址 = baseUrl + url

---

好的，了解这么多之后，我们就开始封装我们的axios把

封装axios默认配置

我们优先来改一下我们的文件目录结构。

在

utils

中有一个

request.js

，在这里我们封装我们的

axios

。

在

api

目录中有

user.js

在这里，我们使用我们封装的request，管理和

user

有关的接口

在需要调接口的地方我们就直接引入

api

中的方法就好了。

首先在

utils/request.js

中编写以下代码。

在

api/user.js

中编写一下代码

app.vue

中调用

ok，这样依赖我们就可以解决我们之前提出的问题1和问题2了

请求拦截器

官方文档告诉我们，

axios

的实例是有请求拦截器的，在这里会对我们的请求做一些拦截。

我们编写代码试试看这个

config

是什么东东

打印结果

就是我们的

congif

啊，那我们根据这个定制一一下

这样我们的问题3就解决了

添加token请求头

在请求的时候我们往往会添加

token

字段来鉴权，添加

token

的方法有很多，下面我来介绍几种常用的，只负责添加。不管有没有添加成功，不成功后端会报错的，之后我们在处理后端报错的情况就好了。

• api中手动添加，需要了我就添加，代码如下

• 请求传参的时候添加一个自定义的参数，表示

  token

  字段需不需要。

之后在我们的请求拦截器中判断这个字段进行处理

响应方式

在解决问题4和5之前。我先总结一下我遇到过的响应方式。

方式1：后端不解决报错，直接丢给前端，这里我们最直观的感受就是返回的状态码是500。

方式2：后端解决报错，每次出错包装一下返回给前端，这里我们最直观的感受是。每一次请求并不会出500错误都是状态码为200成功的请求，但是返回值会多一些东西，举个返回值的栗子，当然，下面的

code,msg

这个不同的公司有不同的规范。

{
    // 我们实际请求的返回值
  	data:{....},
    // 我们实际请求的状态码，后端包装报错的花，这个code会改变，比如500，或者每一个公司有直接的状态码规范
    code:200,
    // 服务器给我们的信息，一般成功的话没有信息，出现异常了这个字段表示错误原因
    msg:"请求成功"
}

响应拦截器

先看一下官方文档，如何我们写道我们的代码里面打印一下这个

response

看看。

因为为根据

user

编写的接口地址是假的，为了展示效果我就切换成https://httpbin.org/get，不过这里的逻辑是不会变的哦，只是地址改变了

我们发现，响应拦截器就是会过一边我们的结果，这样我们就可以在这里进行一些代码编写。

比如问题4，我们只需要编写成下面这样就可以了。

现在我们来处理一下我们最棘手的问题。如何拦截错误？

我们先引入一下elementUI（

npm i element-ui -S

），在遇到错误的时候我们使用message组件进行一个弹框提示。

拦截错误之前，需要了解我们自己公司对应的一套响应策略，针对策略我们进行不同的处理。

首先我们处理一下请求报错的情况，比如404，500等等

首行引入

import { Message } from 'element-ui';

这个

error

还是要

return

一下，这样才会被我们自己些的

catch

捕获到，我们这里只是封装了全局的报错提示，有的时候针对某些请求报错我们还需要自己

catch

处理。

请求正常的情况我们也还是要处理的，因为有一下公司后端会自己拦截错误，返回状态码还是200 但是这个时候数据不对并且有错误信息

这里我们规定，所有的请求都会有  

data,code,msg

字段，请求成功

code

是200，

data

返回正常数据，请求失败了

code

是错误状态码，

data

没有数据，并且有~错误提示。（自己封装的时候根据自己公司的后台接口规范来写）

ok完整的代码如下，首部引入的

Router