Vue中使用Axios实现Ajax异步通信入门

AJAX是一种异步的客户端和服务端进行交换数据的方法，表现是不重新加载页面的情况下，后台与服务器进行了数据交互，再部分的更新页面。

在ES6之前，主要使用浏览器提供的接口XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据。我们熟悉的Jquery的ajax方法就是对XmlHttpRequest的一种封装，它通过回调函数来传递异步操作的消息。甚至有些人认为Jquery的ajax就代表着AJAX异步通信。

从ES6推出开始，异步通信变的有些不同，首先在ES6中提供了一个原生对象Promise，通过Promise对象可以来传递异步操作的消息，在多层回调嵌套时，Promise对象是更好的解决方案。

ES6中更提供了一种新的HTTP数据请求的方式fetch，它是一个全局方法，fetch不基于XMLHttpRequest，而是XMLHttpRequest的一种替代方案。它属于原生js。

本文要说的Axios同样是XMLHTTPRequest对象的一种封装，是一个基于 promise 的 HTTP 库。

下面将用一个简单的例子来演示一下这几个方法，我在fastmock中，定义了一个接口，用于返回产品列表

关于前端开发数据mock，可以查一下资料，easy mock是个很不错的工具，但访问量太大容易挂掉

let url=`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products`
//原生XmlHttpRequest方法
let xhr=new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.send();
xhr.onload=()=>{
  if(xhr.status == 200){
    console.log(JSON.parse(xhr.response)) //需要JSON.parse()方法转换为js对象
  }
}
//jquery提供的ajax方法，需要进入jquery库
$.ajax({
  type: "GET",
  url: url,
  success: (res)=>{
    console.log(res)
  }
});
//axios方法，需要进入axios库
axios({
  url:url,
}).then((res)=>{
  console.log(res);
});
//fetch
fetch(url)
  .then(function(res) {
    return res.json();
  })
  .then(function(myJson) {
    console.log(myJson)
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Axios和jquery的ajax很像，但它是基于Promise的，相比于Ajax的回调函数能够更好的管理异步操作。

AJAX和XHR实现浏览器与服务器的异步通信
ES6-Promise对象获取异步操作的消息

安装Axios

和之前的Vue.js、Vuex.js一样，我们使用script标签引入Axios

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

引入后，你会发现window对象增加了一个属性axios,它是一个函数，下图中能看到axios的静态属性和方法。

一个Axios发送请求结束响应的过程

一、发送请求

axios(config)

参数：config是一个对象，保存着HTTP请求的配置选项,其中只有url是必选项。
返回值：是一个promise对象，axios中习惯用then和catch方法处理异步成功和失败。

异步一旦返回结果，是被then处理还是catch处理是可以人为设定的，在axios的配置项validateStatus返回true,promise 将被 Resolved; 否则，promise 将被 Rejected。
validateStatus配置项默认在HTTP 响应状态码大于等于200小于300时，返回true，promise 将被 Resolved。

二、接受响应

axios('https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products')
.then(res => {
  console.log('res', res);
})
.catch(err => {
  console.log('err', err)
});
1
2
3
4
5
6
7

Axios发送的某个请求，请求成功时then方法接受的响应包含以下信息

{
  data: {}, //服务器提供的响应数据
  status: 200, //服务器响应的 HTTP 状态码
  statusText: 'OK', //服务器响应的 HTTP 状态信息
  headers: {}, //服务器的响应头
  config: {}, //为请求提供的配置信息，未设置的话Axios使用默认值
  request: {} //生成此响应的请求,是一个XMLHttpRequest对象
}
1
2
3
4
5
6
7
8

如本例中，返回的是：

请求失败时，catch方法接受的响应是个Error对象，本例中修改了一下api的路径，访问一个不存在的接口，得到的error对象见下：

Error对象的response属性有可能是未定义的，这种情况下一般通过响应拦截器来给response定义一个对象。

三、拦截请求和响应

用axios的interceptors实现拦截请求，拦截分为请求拦截和响应拦截，用于在发出请求前对请求进行统一的处理，接到响应后对响应的数据进行统一的处理
如：在请求时设置拦截为所有的请求头加上token，请求成功时（指HTTP请求成功）根据服务器返回的数据做相应处理，请求失败时返回错误提示。

//请求拦截器,根据项目需求在请求前进行拦截处理并返回req
  axios.interceptors.request.use(req => {
    req.headers['Authorization'] = '123456';  //一般token会被保存到客户端
    return req;
  })
  // 响应拦截器
  axios.interceptors.response.use(
    //请求成功
    res => {
      if (res.status === 200) {
        // 这里是和后台约定的状态码
        if (res.data.code == '0000') {
          return Promise.resolve(res.data)
        } else {
          return Promise.reject(res)
        }
      } else {
        return Promise.reject(res)
      }
    },
    // 请求失败
    error => {
      const {response} = error;
      if (response) {
        return Promise.reject(response);
      } else {
        // 处理断网的情况
        return Promise.reject({
          status: -1,
          message: '网络已断开'
        });
      }
    });
  axios('https://www1.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products')
    .then(res => {
      console.log('返回的数据', res.data);
    })
    .catch(err => {
      console.log('错误信息', err.message)
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Axios用法详情

HTTP请求的配置选项

请求方法别名

为了方便我们为所有支持的请求方法均提供了别名。

• axios.request(config)
  发送一个HTTP请求,默认是GET请求
• axios.get(url[, config])
  发送一个GET请求来获取服务器上的资源，在 URL 中附带查询参数,查询参数在config对象params配置项中设置。
• axios.delete(url[, config])
  发送一个DELETE请求，删除某一个资源，默认情况下DELETE方法在 URL 中附带查询参数.
• axios.head(url[, config])
  发送一个HEAD请求，类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
• axios.options(url[, config])
  发送一个OPTIONS请求，用于查看服务器的性能。
• axios.post(url[, data[, config]])
  发送一个POST请求用于向服务器提交数据，请求的参数要在http请求的消息主体中发送，一般用于新增一条数据。
• axios.put(url[, data[, config]])
  发送一个PUT请求用于向服务器提交整体更新数据，请求的参数要在http请求的消息主体中发送。
• axios.patch(url[, data[, config]])
  发送一个PATCH请求用于向服务器提交局部更新数据，请求的参数要在http请求的消息主体中发送。

同时发生多个请求

处理同时发生多个请求的辅助函数

• axios.all(iterable)
• axios.spread(callback)
  axios.all()中的请求全部成功后，才执行axios.spread()中的函数，axios.spread()的参数是回调函数，而回调函数的参数是all方法中请求的响应，请求的响应与请求的顺序一致。

let config = {
   baseURL: 'https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api',
 };
 let urlA = `/A`;
 let urlB = `/B`;
 axios.all([axios.get(urlA, config), axios.get(urlB, config)]).then(
   axios.spread((a, b) => {
       console.log(`${a.data.girlName} looks ${b.data.looks} `);
     }
   )
 );
1
2
3
4
5
6
7
8
9
10
11

配置默认值

//配置全局的 axios 默认值 
axios.defaults.baseURL = 'https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api';
1
2

创建一个实例

在项目中，通常会根据指定配置创建一个新的 axios实例

• axios.create([config])

let service=axios.create({
    baseURL: 'https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api',
    timeout: 500,
  });
  service.get('/A').then(res=>{
    console.log('res',res);
  });
1
2
3
4
5
6
7