LEON

Axios 学习

2022.05.18

axios是基于promise的HTTP网络请求库，是对Ajax的封装。在Vue中广泛使用。

特性：

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

通过 传递配置项 发送请求

请求方法默认为GET，所以只有url是必要配置项。其余完整配置项参考官网文档。

因为是基于promise，所以axios请求的返回数据为一个promise对象，可以使用then和catch方法处理成功和失败的情况。

发送get请求：

axios({
  method: 'GET',
  url: 'http://leonzym.com:8000',
  params: {
    name: 'Leon',
    gender: 'male'
  }
})
.then(res => {})
.catch(err => {})

发送post请求：

axios({
  method: 'POST',
  url: 'http://leonzym.com:8000',
  data: {
    name: 'Leon',
    gender: 'male'
  }
})
.then(res => {})
.catch(err => {})

通过 请求方式别名 发送请求

发送get请求：

axios
  .get('http://leonzym.com:8000')
  .then(res => {})
  .catch(err => {})

发送post请求：

axios
  .post('http://leonzym.com:8000',{name: 'Leon', gender: 'male'})
  .then(res => {})
  .catch(err => {})

添加拦截器 interceptors

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

axios的二次封装

// 封装一个请求工具类
class HttpRequest {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  
  getInsideConfig() {
    const config = {
      // 一些默认配置项
      baseURL: this.baseURL,
      header: {},
    }
    return config
  }
  
  interceptor(instance) {
    // 添加请求拦截器
    instance.interceptors.request.use(
      function (config) {
        // 在发送请求之前做些什么
        return config
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
      }
    )
    // 添加响应拦截器
    instance.interceptors.response.use(
      function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response
      },
      function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error)
      }
    )
  }
  
  // 后序需要接口请求的时候就调用request函数
  request(options) {
    // 创建axios实例
    const instance = axios.create()
    // 拼接配置项
    options = { ...this.getInsideConfig(), ...options }
    // 给实例添加拦截器
    this.interceptor(instance)
    // 返回接口请求的响应数据（promise对象）
    return instance(options)
  }
}

// 将工具类暴露出去
export default new HttpRequest(baseURL)
JavaScript