axios简述

    在阅读本文前，建议先阅读 Promise 相关介绍 https://my.oschina.net/u/2563695/blog/4769779。

• 前言

     Vue中发送网络请求的方式

        XHR：XMLHttpRequest。

        jQuery-Ajax：jQuery代码1w+行，Vue的代码才1w+行。所以没必要为了网络请求而引用这么重的框架。

        vue-resource：Vue1.x的时候, 推出了Vue-resource(体积小)，但后来Vue作者改为推荐axios。

        axios：Vue官方当前推荐的网络请求框架。

• axios简介

    可能是 axios: ajax i/o system 的简称。

    特点：支持 Promise API，可以拦截请求和响应，转换请求和响应数据。

   1. 基本使用

axios({
  url: url,
  method: 'get'/'post'
}).then(res => {
  console.log(res);
})

    2.axios.all

    使用axios.all, 可以同时发起多个请求，且在所有请求都响应后执行response。

    axios.all([]) 返回的结果是一个数组。

axios.all([
  axios({url: url1,}), 
  axios({url: url2, params: {}})
]).then(results => {
  console.log(results[0]);  //url1的响应
  console.log(results[1]);  //url2的响应
})

    使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2。

axios.all([
  axios({url: url1,}),
  axios({url: url2, params: {}})
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

    3.全局配置

    可以对axios进行全局配置。

请求地址  url: '/user',
请求类型  method: 'get',
请根路径  baseURL: 'http://www.mt.com/api',
请求前的数据处理  transformRequest:[function(data){}],
请求后的数据处理  transformResponse: [function(data){}],
自定义的请求头 headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象 params:{ id: 12 },
查询对象序列化函数 paramsSerializer: function(params){ }
request body  data: { key: 'aa'},
超时设置  timeout: 1000,
跨域是否带Token  withCredentials: false,
自定义请求处理 adapter: function(resolve, reject, config){},
身份验证信息  auth: { uname: '', pwd: '12'},
响应的数据格式  responseType: 'json'（json/blob/document/arraybuffer/text/stream）

    如下配置的请求地址前缀和超时时间对所有axios发起的请求均生效。

axios.defaults.baseURL = 'http://172.10.8.8:8080'
axios.defaults.timeout = 5000

    4.axios实例

    可以创建不同的axios实例，进行不同的配置，从而达到封装的目的。

//创建对应的axios的实例
const instance1 = axios.create({
  baseURL: 'http://172.10.8.8:8080',
  timeout: 5000
})
//调用
instance1({
  url: '/sys/getUser'
}).then(res => {
  console.log(res);
})

    5.封装

    在项目中，可以使用如下方式，对axios进行封装。

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

  //2.请求拦截的作用
  instance.interceptors.request.use(config => {
    //TODO sth.
    //拦截之后config需要返回，否则请求中就不带config了
    return config;
  }, err => {
    //TODO sth.
  })

  //3.响应拦截
  instance.interceptors.response.use(res => {
    //TODO sth.
    //对axios自带的属性进行过滤，返回controller中返回的数据
    return res.data;
  }, err => {
    //TODO sth.
  })

  //4.发送网络请求。axios本身返回的就是Promise对象。
  return instance(config)
}

//调用
request({
  url: '/sys/getUser',
  method: 'get',
  params: {id : id1}
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

 

感谢：以上内部部分参考王元红老师的vue资料。

来源：oschina

链接：https://my.oschina.net/u/2563695/blog/4873855