axios的介绍

• Axios是一个基于Promise的HTTP库。类似于Ajax, 用于HTTP请求
• 可以用于浏览器和node.js。既可以用于客户端，也可以用于服务端。
• 支持promise API
• 拦截请求和响应。可以在请求或响应前做一些操作。比如在请求前，给请求头加一些授权信息等。
• 转换请求数据和响应数据。例如在请求时，一些敏感信息需要加密，接收时需要解密。
• 取消请求。
• 自动转换JSON数据。HTTP请求过程中，一般传输的都是字符串，需要json.parse来进行转换。Axios会自动进行转换。
• 客户端支持防御XSRF攻击。

 axios的请求方法

get：获取数据

axios.get('/user?ID=12345')
// 或
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
// 或
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})

post：提交数据(表单+文件上传)

1.以前还用form-data用于提交，不过现在也存在，用于表单提交或者图片上传。如下代码

let data {
    id: 10
}

// form-data请求
let formData = new FormData()
for(let key in data) {
    formData.append(key, data[key])    
}
axios.post('/post', formData).then(res=>{console.log(res)})

2.application/json，现在大多数用的就是这种格式，如下代码。

 

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
// 或
// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

备注：切记自己是要以哪种方式上传，比如用了第一种去过数据登入，可能还会报状态码415的错误，就像下边一样

put：更新数据(所有数据推送到后端)

axios.put('/put', data)

patch: 更新数据(只将修改的数据推送到后端)

axios.patch('/patch', data)

delete: 删除数据

// 在url上拼接参数
axios.delete('/delete', {
    params: {
        id: 12
    }
})

// 不在url上拼接参数的，在请求体里的
axios.delete('/delete', {
    data: {
        id: 12
    }
})

// 综合写法
axios({
    method: 'delete',
    url: '/delete',
    // url拼接方式
    params: {},
    // 请求体的
    // data: {}
})

 

并发请求

同时进行多个请求，并统一处理返回值

axios.all() 参数是多个axio请求组成的数组

axios.all([
    axios.get('/data.json'),
    axios.get('/user.json')
])

axios.spread() 对多个请求完成后的返回数据进行分割处理,参数是回调函数,回调函数的参数对应多个请求的返回值

.then(
    aioxs.spread((dataRes, cityRes) => {
        console.log(dataRes, cityRes)
    })
)

 

创建axios实例

后端接口有多个地址，超时时长不同。可以在实例中配置这些参数，用实例去请求。 超时时长 发起HTTP请求时，如果服务端长时间没有返回数据，接口就会报超时。一般由后端进行定义。

先看下配置信息：

let config = {
    // 下面是请求的配置
    // 请求的域名，基本地址
    baseURL: 'http://localhost:8080',
    // 超时时长
    timeout: 1000,
    url: '/data.json',// 请求路径
    method: 'get,post,puth,patch,delete',
    // 请求头
    headers: {
        token: ''
    },
    // 请求参数拼接在url上
    params: {},
    // 请求参数放在请求体里面
    data: {}
} 

axios全局配置

//1.全局配置,可以配置上面config的参数，如下
axios.defaults.timeout = 1000;
axios.defaults.baseUrl = 'http://localhost:8080'

axios实例配置

//2.实例配置
let instance = axios.create();
// 可以配置config的信息
instance.defaults.timeout = 3000;

axios请求配置

let instance = axios.create({});
//3.axios请求配置,config里面就是上面的config一些请求信息
instance.get('/public/test.json', config).then(res => {
    console.log(res);
});

配置的优先级: 全局配置<实例配置<请求配置

拦截器

在请求或响应被处理前拦截。 请求拦截器 响应拦截器 取消拦截器 请求错误和响应错误的区别。

请求拦截器

let instance = axios.create({})
// 请求拦截器
instance.interceptors.request.use(config => {
  // 可以在请求的时候设置请求头，比如说在登入时候需要设置token等等
  config.headers.token = ''
  return config;
}, (err)=> {
  // 后台接口请求错误
  console.log(err)
});

实例1：这个请求器可以创建多个，比如上面这个是创建请求登入时候的拦截器，你可以可以设置不需要登入的接口拦截器

实例2： 比如请求时候等待的很长，要在请求前显示loading...,如下面,然后再响应拦截器里卖弄把弹框隐藏掉。

instance.interceptors.request.use(config => {
    $('#modal').show()
    return config
})

响应拦截器

instance.interceptors.response.use(res => {
  // 请求成功，Toast就清理掉,res就是请求成功后返回的数据
  return res.data;
}, (err)=>{
    console.log(err)
});

错误处理

// 请求错误拦截
let instance = axios.create({})
instance.interceptors.request.use(config => {
  return config;
}, (err)=>{
    // 请求错误，一般http状态码，如404无资源、401身份未验证
    return Promise.reject(err)
}).catch;

// 响应错误拦截
let instance = axios.create({})
instance.interceptors.response.use(res => {
  return res.data;
}, (err)=>{
    // 请求错误，一般http状态码，502服务端临时中断重启
    return Promise.reject(err)
}).catch;

取消请求

取消正在进行的http请求。 crm管理系统，新建，编辑，查询 数据量大 3-5s，可能会需要取消请求

axios的二次封装

我们在使用axios进行异步操作时，可能会遇到以下情况：

• 每个请求的格式都有可能不同
• 对一个按钮频繁点击，发送多次请求

有了封装之后，

• 我们可以让请求格式保持统一，也可以省略不少的代码量，也可以在大家一起工作的时候效率更高。
• 我们可以把接口都放在一个js文件里卖，我们可以统一的管理它，在用的时候去调用它。

具体的封装过程：

引入库文件

import axios from 'axios';
// 写好的整个接口文件
import service from './contactApi';
import { Toast } from 'vant';// 可有可无，你也可以用elementUI

请求配置

// 循环遍历输出不同的请方法
let instance = axios.create({
  // 基础地址
  baseURL: 'http://localhost:9000/api',
  // 超时不请求
  timeout: 1000
});

请求的处理

 

// 包裹请求方法的容器
const Http = {};
// 请求格式/参数的统一
for (let key in service) {
  // url method
  let api = service[key];
  // params是向get获得的参数，而isFromData是向post请求的参数，
  Http[key] = async function(
    // 请求参数get:url | put(data) | post(data) | patch(data) | delete:url
    params,
    // 标识是否为form请求
    isFormData = false,
    // 配置参数
    config = {}
  ){

    // post中的form-data
    let newParams = {};
    // contact-type是否是form-data的判断
    if(params && isFormData) {
      //通过FormData构造函数创建一个空对象
      newParams = new FormData();
      for (let i in params) {
        //可以通过append()方法来追加数据
        newParams.append(i, params[i])
      }
    } else {
      // 如果没有表单请求，直接将params或者data赋值
      newParams = params
    }

    // 去请求的返回值
    let response = {};
    // 不同请求的判断
    if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
      try {
        // 用await可以直接获取数据 ,axios请求配置的写法，其实config就是配置的信息，包裹params，data，outtime等等
        response = await instance[api.method](api.url, newParams, config)
      } catch (err) {
        response = err
      }
    } else if(api.method === 'get' || api.method === 'delete') {
      config.params = newParams;
      try {
        response = await instance[api.method](api.url, config)
      } catch(err) {
        response = err
      }
    }
    return response;
  }
}

说明：

1.里面采用了，如果又表上传，使用了FromData的方式。

2.异步方法里面三个，params代表url后面的拼接参数，isFormData是判断是否为FormData表单请求(没有就传递params或者data)，config里面axios基础的一些配置(可以本文章顶头)

设置拦截器

 

// 请求拦截器
instance.interceptors.request.use(config => {
  // 发起请求前做什么
  Toast.loading({
    // 取消遮罩
    mask: false,
    duration: 0,
    // 动画出现时候禁止其他点击
    forbidClick: true,
    message: '加载中...'
  })
  return config;
}, ()=> {
  // 请求错误
  Toast.clear();
  Toast('请求错误，请稍后重试')
});

// 响应拦截器
instance.interceptors.response.use(res => {
  // 请求成功，Toast就清理掉
  Toast.clear();
  return res.data;
}, ()=>{
  Toast.clear();
  Toast('返回错误');
});

具体封装代码：见我的github中的src/server文件夹：https://github.com/Hansen1994/use-axios-in-vue