Axios

axios的优势

功能特点：

• 在浏览器发送XMLHttpRequest请求
• 在nodejs中发送http请求
• 支持promise API
• 拦截请求和响应
• 转换请求和相应数据

发送并发请求

• 返回一个数组，包括两个元素，这两个元素就是两个响应数据

axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

使用全局的axios和对应的配置在进行网络请求

headers

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/home/multidata'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

拦截器

请求拦截

  instance.interceptors.request.use(config => {
     //拦截成功，config是请求配置信息
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    //必须返回config，不反悔的话相当于请求信息压根没到服务器
    return config
  }, err => {
    // console.log(err);
  })

响应拦截

  instance.interceptors.response.use(res => {
    // 记得要将拦截的信息返还回去
    return res.data
  }, err => {
    console.log(err);
  })

创建对应的axios的实例

//创建实例一
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})

instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

//创建实例二
const instance2 = axios.create({
  baseURL: 'http://222.111.33.33:8000',
  timeout: 10000,
  // headers: {}
})

ES6 Promise封装

"^0.18.0",

import axios from 'axios'

// ES6 Promise的封装
export function request(options) {
  return new Promise((resolve, reject) => {
    // 1.创建axios的实例对象
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })

    // 过滤器(拦截器)
    instance.interceptors.response.use(res => {
      return res.data
    })

    // 通过实例发送网络请求
    instance(options)
        .then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
    })
  })
}

使用方法

import {request} from "./network";

export function getDetail(iid) {
    return request({
        url: '/detail',
        params: {
            iid
        }
    })
}

• 调用

 import {getDetail} from "network/home";
getDetail(id)
           .then(res => {
          //res就是请求下来的数据
               console.log(err) })
           .catch(err => {
               console.log(err) })

ES5封装方式

import axios from 'axios'

export function request(options, success, failure) {
  // 1.创建axios的实例对象
  const instance = axios.create({
    baseURL: 'http://123.***.**.**:8000',
    timeout: 5000
  })

  // 过滤器(拦截器)
  instance.interceptors.response.use(res => {
    return res.data
  })

  // 通过实例发送网络请求
  instance(options)
      .then(res => {
        success(res)
      }).catch(err => {
        failure(err)
      })
}

高级封装

版本："axios": "^0.21.1",

• 封装

import axios from 'axios'
import { AxiosInstance, AxiosRequestConfig } from 'axios'
class qbRequest {
  instance: AxiosInstance
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }
  request(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}
export default qbRequest

• 出口函数

  
  image.png

取消上一次的axios请求

• 方法一：使用CancelToken创建一个取消令牌

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

• 方法二：也可以通过传递一个executor函数给CancelToken构造函数来创建一个取消令牌

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request（cancel直接被赋值为函数）
cancel();